/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page-section {

    padding:
        var(--space-3xl) 0;

    background:
        var(--color-background);

}

/* =========================================================
   VISUAL
========================================================= */

.about-page-visual {

    position: relative;

    padding-right:
        35px;

    padding-bottom:
        35px;

}

.about-page-visual > img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-lg);

}

/* =========================================================
   EXPERIENCE CARD
========================================================= */

.about-page-experience {

    position: absolute;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    max-width: 270px;

    padding:
        17px 20px;

    border:
        1px solid
        rgba(16, 42, 67, 0.07);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-white);

    box-shadow:
        var(--shadow-lg);

}

.about-page-experience-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    border-radius:
        13px;

    background:
        rgba(244, 119, 33, 0.10);

    color:
        var(--color-secondary);

}

.about-page-experience strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--color-primary);

    font-size:
        var(--fs-xs);

}

.about-page-experience span {

    display: block;

    color:
        var(--color-text-light);

    font-size:
        10px;

}

/* =========================================================
   CONTENT
========================================================= */

.about-page-content {

    max-width:
        620px;

}

.about-page-lead {

    margin-bottom:
        var(--space-md);

    color:
        var(--color-primary);

    font-size:
        var(--fs-md);

    font-weight:
        var(--fw-medium);

    line-height:
        1.75;

}

.about-page-text {

    margin-bottom:
        var(--space-xl);

    color:
        var(--color-text-light);

    font-size:
        var(--fs-sm);

    line-height:
        1.8;

}

/* =========================================================
   HIGHLIGHTS
========================================================= */

.about-page-highlights {

    display: grid;

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

    gap:
        var(--space-lg);

}

.about-page-highlight {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}

.about-page-highlight-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    border-radius:
        11px;

    background:
        rgba(244, 119, 33, 0.08);

    color:
        var(--color-secondary);

    font-size:
        13px;

}

.about-page-highlight h4 {

    margin:
        0 0 4px;

    color:
        var(--color-primary);

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-sm);

}

.about-page-highlight p {

    margin:
        0;

    color:
        var(--color-text-light);

    font-size:
        var(--fs-xs);

    line-height:
        1.6;

}

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

.about-values-section {

    padding:
        var(--space-3xl) 0;

    background:
        var(--color-white);

}

.about-values-heading {

    max-width:
        700px;

    margin:
        0 auto var(--space-2xl);

}

.about-value-card {

    height:
        100%;

    padding:
        var(--space-xl);

    border:
        1px solid
        rgba(16, 42, 67, 0.07);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-white);

    box-shadow:
        var(--shadow-sm);

    text-align:
        center;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}

.about-value-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-lg);

}

.about-value-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    margin:
        0 auto var(--space-md);

    border-radius:
        16px;

    background:
        rgba(244, 119, 33, 0.09);

    color:
        var(--color-secondary);

    font-size:
        18px;

}

.about-value-card h3 {

    margin-bottom:
        var(--space-sm);

    color:
        var(--color-primary);

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-lg);

}

.about-value-card p {

    margin:
        0;

    color:
        var(--color-text-light);

    font-size:
        var(--fs-xs);

    line-height:
        1.7;

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .about-page-section,
    .about-values-section {

        padding:
            var(--space-2xl) 0;

    }

    .about-page-visual {

        padding-right:
            15px;

        padding-bottom:
            25px;

    }

    .about-page-visual > img {

        height:
            400px;

    }

    .about-page-highlights {

        grid-template-columns:
            1fr;

        gap:
            var(--space-md);

    }

    .about-page-experience {

        right:
            0;

        max-width:
            250px;

        padding:
            14px 16px;

    }

}