﻿.sf-about-container {
    padding: 22px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sf-about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 75%;
}

.sf-about-red-title {
    color: var(--sf-soft-red);
}

.sf-about-container .sf-about-section-page-title,
.sf-about-container h2,
.sf-about-container h3 {
    font-weight: 700;
    max-width: 991px;
    text-align: center;
}

.sf-about-section-page-title {
    font-size: 24px;
    color: var(--sf-soft-red);
    margin-bottom: 18px;
}

.sf-about-section h2 {
    font-size: clamp(30px, 3vw, 70px);
    margin: clamp(8px, 1.2vw, 22px) 0;
}

.sf-about-section h3 {
    font-size: clamp(24px, 2.7vw, 50px);
    margin: clamp(12px, 1.2vw, 22px) 0;
}

.sf-about-section > img {
    width: 100%;
    max-width: 100%;
    margin: 8px 0;
}

.sf-about-text,
.sf-about-section-subtitle,
.sf-about-section ul {
    width: 100%;
    text-align: start;
    padding: 0 12px;
}

.sf-about-text,
.sf-about-section ul {
    font-size: clamp(14px, 1.8vw, 32px);
    font-weight: 400;
    margin: clamp(8px, 1.3vw, 24px) 0;
}

.sf-about-section-subtitle {
    font-size: clamp(16px, 1.8vw, 32px);
    font-weight: 700;
    margin-top: clamp(18px, 1.3vw, 26px);
    margin-bottom: clamp(8px, 1vw, 16px);
}

.sf-about-section ul {
    list-style: disc;
    padding-inline-start: clamp(40px, 4vw, 70px);
}

.sf-about-section ul li {
    margin-bottom: 28px;
}

.sf-about-features-container {
    width: 100%;
    display: flex;
    --sf-about-features-container-gap: 1px;
    gap: var(--sf-about-features-container-gap);
    margin: 16px 0;
}

.sf-about-feature {
    background: var(--sf-dark-blue);
    height: clamp(240px, 35vw, 580px);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.sf-about-feature > img {
    width: clamp(73px, 13vw, 180px);
    max-height: 33%;
}

.sf-about-feature > p {
    color: var(--sf-white);
    font-size: clamp(14.5px, 2vw, 35px);
    font-weight: 700;
    text-align: center;
    margin-top: clamp(26px, 3vw, 56px);
}

.sf-about-features-title {
    color: var(--sf-soft-red);
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 32px);
    margin: 28px 0 20px 0;
}

@media screen and (max-width: 720px) {
    .sf-about-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 95%;
    }
    .sf-about-features-container {
        flex-wrap: wrap;
    }
    .sf-about-feature {
        flex: initial;
        width: calc(50% - (var(--sf-about-features-container-gap) / 2));
    }
}

@media screen and (max-width: 380px) {
    .sf-about-feature {
        height: 210px;
    }
}