/* =================================================================== FEATURES section css =================================================================== */
.features {
    & .features__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g30);
    }

    & .features__card {
        position: relative;
        padding: var(--sp50) var(--sp40) var(--sp50) var(--sp50);
        background: var(--white);
        border-radius: var(--r-xl);
        transition: var(--transition);

        &:hover { transform: translateY(-6px); }
        &:hover .features__icon { color: var(--primary); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .features__notch { --notch-r: var(--r-xl); }

    & .features__title {
        position: relative;
        max-width: calc(100% - 80px);
        padding-bottom: var(--sp30);
        margin-bottom: var(--sp30);
        font-size: var(--f30);

        &::after {
            position: absolute; bottom: 0; left: 0;
            width: 100%; height: 1px;
            background: var(--line);
            content: '';
        }
    }

    & .features__body {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp25);
    }

    & .features__text { max-width: 300px; font-size: var(--f18); }

    & .features__icon {
        flex: 0 0 auto;
        width: 70px; height: 70px;
        color: var(--ink);
        transition: var(--transition);

        & svg { width: 100%; height: 100%; }
    }

}

/* =================================================================== FEATURES responsive =================================================================== */
@media (max-width: 1365.98px) {
    .features {
        & .features__card { padding: var(--sp40) var(--sp30); }
        & .features__icon { width: 55px; height: 55px; }
    }
}

@media (max-width: 991.98px) {
    .features {
        & .features__grid { grid-template-columns: 1fr; }
    }
}

@media (max-width: 575.98px) {
    .features {
        & .features__card { padding: var(--sp30) var(--sp20); }
        & .features__text { font-size: var(--f16); }
    }
}