/* =========================================================
   TENTANG
========================================================= */

.about-card {

    margin-top: 25px;

    padding: 35px;

    text-align: center;

}


.about-logo {

    width: 75px;

    height: 75px;

    margin: 0 auto 18px;

    border:
        5px solid
        var(--green);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--green);

    font-size: 42px;

}


.about-card h2 {

    margin: 0;

    font-size: 28px;

}


.about-subtitle {

    margin-top: 5px;

    color: var(--green-dark);

    font-size: 17px;

    font-weight: 600;

}


.about-description {

    max-width: 650px;

    margin:
        18px
        auto;

    color: #667085;

    font-size: 15px;

    line-height: 1.7;

}


.about-version {

    display: inline-block;

    padding:
        7px
        13px;

    background: #f2f4f7;

    color: #475467;

    font-size: 13px;

}


/* =========================================================
   SECTION
========================================================= */

.about-features,
.about-tech {

    margin-top: 20px;

    padding: 24px;

}


.about-section-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 20px;

}


/* =========================================================
   FEATURES
========================================================= */

.feature-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

}


.feature-item {

    padding: 18px;

    border:
        1px solid
        var(--border);

    display: flex;

    align-items: flex-start;

    gap: 14px;

}


.feature-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

}


.feature-icon.green {

    background: #eaf8ee;

    color: #20a94a;

}


.feature-icon.blue {

    background: #edf5ff;

    color: #1677ff;

}


.feature-icon.yellow {

    background: #fff5d7;

    color: #a97100;

}


.feature-icon.purple {

    background: #f3edff;

    color: #6639c8;

}


.feature-item strong {

    display: block;

    font-size: 15px;

}


.feature-item p {

    margin:
        6px
        0
        0;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================================
   TECHNOLOGY
========================================================= */

.tech-list {

    border-top:
        1px solid
        #edf0f3;

}


.tech-row {

    min-height: 55px;

    padding:
        0
        5px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        #edf0f3;

    font-size: 14px;

}


.tech-row span {

    color: #667085;

}


.tech-row strong {

    color: #24364a;

}


/* =========================================================
   FOOTER
========================================================= */

.about-footer {

    margin-top: 25px;

    padding:
        10px;

    text-align: center;

    color: #98a2b3;

    font-size: 12px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .feature-grid {

        grid-template-columns: 1fr;

    }


    .about-card {

        padding: 25px 18px;

    }


    .about-features,
    .about-tech {

        padding: 18px;

    }


    .tech-row {

        gap: 15px;

    }

}