/* Safe Fleet key benefits. */

.sf-key-benefits {
    padding: 60px 24px;

    background: #ffffff;
}

.sf-key-benefits__container {
    width: min(100%, 1312px);
    margin-inline: auto;
}

.sf-key-benefits__header {
    max-width: 760px;
    margin: 0 auto 40px;

    text-align: center;
}

.sf-key-benefits__title {
    margin: 0 0 18px;

    color: #101d40;

    font-size: clamp(44px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.sf-key-benefits__description {
    margin: 0;

    color: #3f527e;

    font-size: 20px;
    line-height: 1.5;
}

.sf-key-benefits__description strong {
    font-weight: 700;
}

.sf-key-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sf-key-benefit-card {
    min-width: 0;
    min-height: 307px;
    padding: 32px;

    color: #182448;
    background: #f6f7ff;
    border-radius: 28px;
}

.sf-key-benefit-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 25px;
}

.sf-key-benefit-card__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 36px;
    margin: 0;
    padding: 7px 12px;

    color: #082fe7;
    background: #ecefff;
    border: 1px solid #ced6ff;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.sf-key-benefit-card__label svg {
    flex: 0 0 auto;
}

.sf-key-benefit-card__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    color: #0b35eb;
    background: #ecefff;
    border: 1px solid #ced6ff;
    border-radius: 50%;
}

.sf-key-benefit-card__value {
    margin: 0 0 24px;

    color: #182448;

    font-size: 66px;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.sf-key-benefit-card__value span {
    margin-left: 6px;

    color: #5c6a89;

    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.sf-key-benefit-card__title {
    margin: 0 0 8px;

    color: #182448;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.sf-key-benefit-card__description {
    margin: 0;

    color: #53617f;

    font-size: 14px;
    line-height: 1.55;
}

.sf-key-benefit-card__description strong {
    color: #3b4b71;
    font-weight: 700;
}

.sf-shield-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sf-shield-visual__rings {
    position: absolute;
    top: -1px;
    left: 317px;

    width: 500px;
    height: 500px;

    background: repeating-radial-gradient(
            circle at center,
            transparent 0 47px,
            rgba(59, 92, 238, 0.13) 48px 49px
        );
    border-radius: 50%;
}

.sf-shield-visual__shield {
    position: absolute;
    top: 209px;
    left: 527px;

    display: grid;
    place-items: center;

    width: 78px;
    height: 78px;

    background: #1733da;
    border-radius: 50%;
}

.sf-shield-visual__dot {
    position: absolute;

    width: 11px;
    height: 11px;

    background: #1733da;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
}

.sf-shield-visual__dot--one {
    top: 145px;
    left: 432px;
}

.sf-shield-visual__dot--two {
    top: 94px;
    left: 547px;
}

.sf-shield-visual__dot--three {
    top: 335px;
    left: 462px;
}

@media (max-width: 1200px) {
    .sf-key-benefit-card {
        padding-inline: 26px;
    }
    .sf-key-benefit-card__description .sf-card-break {
        display: none;
    }
    .sf-shield-visual__rings {
        left: auto;
        right: -153px;
    }
    .sf-shield-visual__shield {
        left: auto;
        right: 59px;
    }
    .sf-shield-visual__dot--one {
        left: auto;
        right: 221px;
    }
    .sf-shield-visual__dot--two {
        left: auto;
        right: 106px;
    }
    .sf-shield-visual__dot--three {
        left: auto;
        right: 191px;
    }
}

@media (max-width: 900px) {
    .sf-key-benefits__grid {
        grid-template-columns: 1fr;
    }
    .sf-key-benefit-card {
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    .sf-key-benefits {
        padding: 48px 14px;
    }
    .sf-key-benefits__header {
        margin-bottom: 28px;
    }
    .sf-key-benefits__title {
        margin-bottom: 14px;
        font-size: 40px;
    }
    .sf-key-benefits__description {
        font-size: 16px;
    }
    .sf-key-benefit-card {
        min-height: 274px;
        padding: 24px 22px;
        border-radius: 22px;
    }
    .sf-key-benefit-card__topline {
        margin-bottom: 22px;
    }
    .sf-key-benefit-card__label {
        font-size: 12px;
    }
    .sf-key-benefit-card__arrow {
        width: 40px;
        height: 40px;
    }
    .sf-key-benefit-card__value {
        margin-bottom: 20px;
        font-size: 58px;
    }
    .sf-key-benefit-card__title {
        font-size: 21px;
    }
    .sf-shield-visual {
        position: relative;
        inset: auto;

        min-height: 280px;
        margin: -24px -22px;
    }
    .sf-shield-visual__rings {
        top: -105px;
        right: -188px;
    }
    .sf-shield-visual__shield {
        top: 106px;
        right: 24px;
    }
    .sf-shield-visual__dot--one {
        top: 42px;
        right: 186px;
    }
    .sf-shield-visual__dot--two {
        top: -9px;
        right: 71px;
    }
    .sf-shield-visual__dot--three {
        top: 232px;
        right: 156px;
    }
}