.features-block-component {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-7xl) var(--spacing-xl);
    gap: var(--spacing-4xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
        gap: var(--spacing-5xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
        gap: var(--spacing-7xl);
    }
}
.features-block-component.light {
    background-color: var(--color-white);
}
.features-block-component.dark {
    background-color: #161B26;
}
.features-block-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-none);
    gap: var(--spacing-2xl);
    @media (min-width: 1024px) {
        padding: var(--spacing-none) var(--spacing-4xl);
        max-width: var(--container-max-width-desktop);
        margin: 0 auto;
    }
}
.features-block-icons {
    display: flex;
    align-items: end;
    width: fit-content;
    gap: var(--spacing-lg);
}
.features-block-icon {
    [lang="ar"] & {transform: scaleX(-1)}
    @media (min-width: 1024px) {
        gap: var(--spacing-md);
    }
    .block-icon {
        .dark & {filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(106%) hue-rotate(202deg) brightness(91%) contrast(88%);}
    }
    .block-icon-size-24 {
        width: 24px;
        height: 24px;
    }
    .block-icon-size-48 {
        width: 48px;
        height: 48px;
    }
    .block-icon-size-96 {
        width: 96px;
        height: 96px;
    }
}
.features-block-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
}
.features-detail-eyebrow {
    letter-spacing: 0.0125em;
    font: var(--english-text-sm-semibold);
    [lang="ar"] & {font: var(--arabic-text-sm-semibold);}
    color: var(--color-teal-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    @media (min-width: 768px) {
        font: var(--english-text-md-semibold);
        [lang="ar"] &s {font: var(--arabic-text-md-semibold);}
    }
}
.features-block-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    @media (min-width: 768px) {
        gap: var(--spacing-2xl);
    }
}
.features-detail-title__h2 {
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    font: var(--english-display-sm-semibold);
    [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 0;
    @media (min-width: 768px) {
        font: var(--english-display-lg-semibold);
        [lang="ar"] & {font: var(--arabic-display-lg-semibold);}
        font-size: 36px;
        line-height: 44px;
    }
}
.features-detail-subtitle__h2 {
    color: var(--color-gray-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    letter-spacing: 0.03em;
    margin-bottom: 0;
    font: var(--english-text-md-regular);
    [lang="ar"] & {
        font: var(--arabic-text-md-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        font: var(--english-text-lg-regular);
        [lang="ar"] & {
            font: var(--arabic-text-lg-regular);
            letter-spacing: 0em;
        }
    }
}
.features-block-cards {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 100%;
    padding: var(--spacing-none);
    gap: var(--spacing-4xl);
    justify-content: center;
    /*align-items: center;*/
    @media (min-width: 768px) {
        flex-direction: row;
        padding: var(--spacing-none);
        gap: var(--spacing-xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-none) var(--spacing-4xl);
        max-width: var(--container-max-width-desktop);
        margin: 0 auto;
        gap: var(--spacing-3xl);
    }
}
.features-component {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: var(--radius-xl);
    padding:  var(--spacing-4xl) var(--spacing-none);
    gap: var(--spacing-4xl);
    background-color: #FFF;
    border: 1px solid #D0D5DD;
    box-shadow:
        0px 2px 4px -2px #1018280F,
        0px 4px 8px -2px #1018281A;
    max-width: 400px;
    @media (min-width: 768px) {
        padding:  var(--spacing-4xl) var(--spacing-none);
    }
    .dark & {
        background-color: var(--color-gray-950);
        border: 1px solid #333741;
    }
}
.features-component.primary {
    border: 2px solid #008D89;
    .dark & {border-color: #00AFAB}
}
.features-component-header {
    display: flex;
    flex-direction: column;
    padding:  var(--spacing-none) var(--spacing-xl);
    gap: var(--spacing-6xl);
}
.features-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
}
.features-header-heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    .features-heading-icon {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2xl);
    }
    .features-icon {
        width: 42px;
        height: 42px;
        border-radius: var(--radius-md);
        padding: 10px;
        border: 1px solid #D0D5DD;
        box-shadow: 0px 1px 2px 0px #1018280D;
        .dark & {
            filter: invert(100%) sepia(5%) saturate(118%) hue-rotate(190deg) brightness(100%) contrast(100%);}
        .features-icon-size-20 {
            width: 20px;
            height: 20px;
        }
    }
    .features-eyebrow {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        font-family: var(--font-text);
        color: var(--color-teal-700);

        .dark & {
            color: var(--color-gray-dark-700-dark);
        }

        [lang="ar"] & {
            font-family: var(--font-text);
            @media (min-width: 768px) {
                font-size: 14px;
                line-height: 20px;
            }
            @media (min-width: 1024px) {
                font-size: 18px;
                line-height: 28px;
            }
        }
    }
    .features-title {
        font: var(--english-display-sm-semibold);
        [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
        line-height: var(--line-height-display-sm);
        color: var(--text-primary);
        .dark & {color: var(--color-gray-900-dark);}
        margin-bottom: 0;
        @media (min-width: 768px) {
            font: var(--english-display-md-semibold);
            [lang="ar"] & {font: var(--arabic-display-md-semibold);}
            line-height: var(--line-height-display-md);
        }
        @media (min-width: 1024px) {
            font: var(--english-display-md-semibold);
            [lang="ar"] & {font: var(--arabic-display-md-semibold);}
            line-height: var(--line-height-display-md);
        }
    }
    .features-subtitle {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        font-family: var(--font-text);
        color: var(--color-gray-600);
        .dark & {color: #94969C}

        letter-spacing: 0.0325em;
        margin-bottom: 0;
    }
}
.features-component-body {
    .features-table-header {
        background-color: #FFF;
        padding: var(--spacing-none) var(--spacing-xl) var(--spacing-xl);
        .dark & {background-color: var(--color-gray-950);}
    }
    .features-table-title {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        font-family: var(--font-text);
        color: var(--color-teal-700);
        .dark & {color: var(--color-gray-dark-700-dark);}

    }
    .features-table-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .features-table-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-xl);
        background-color: #F9FAFB;
        .light & {background-color: #FFF;}

        .features-title {
            margin: 0;
            font-size: 14px;
            line-height: 20px;
            font-weight: 500;
            font-family: var(--font-text);
            color: var(--color-gray-900);
            .dark & {color: var(--color-gray-900-dark);}

        }
        .features-indicator-plus {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .features-indicator-minus {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #98A2B3;
        }
        .features-indicator-text {
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            font-weight: 400;
            color: #98A2B3;
        }
    }
    .features-table-row.odd {
        background-color: #FFF;
        .dark & {background-color: #161B26;}
    }
    .features-table-row.even {
        .dark & {background-color: #0C111D;}
    }
}
.features-component-footer {
    padding: var(--spacing-none) var(--spacing-xl);
    gap: var(--spacing-3xl);
    margin-top: auto;
    .button--xl {
        width: 100%;
    }
}