/* =========================================================
   VISI & MISI
   PA Buntok — Minimal Editorial
   ========================================================= */

.visi-misi-pa {
    width: 100%;
    color: #24332f;
}


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

.vm-section {
    margin: 0 0 56px;
}

.vm-section:last-child {
    margin-bottom: 0;
}


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

.vm-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 24px;
}

.vm-number {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;

    color: #08783f;
}

.vm-label {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #7b8b86;
}

.vm-section-heading h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;

    color: #17362e;
}


/* =========================================================
   VISI CARD
   ========================================================= */

.vm-visi-card {
    position: relative;

    padding: 34px 42px;

    background: #f8faf9;

    border: 1px solid #e5ebe8;
    border-left: 3px solid #08783f;

    border-radius: 6px;
}

.vm-quote-mark {
    position: absolute;

    top: 15px;
    left: 22px;

    font-family: Georgia, serif;
    font-size: 42px;
    line-height: 1;

    color: #dce8e2;
}

.vm-visi-card p {
    position: relative;

    margin: 0;

    max-width: 900px;

    font-size: 19px;
    line-height: 1.75;
    font-weight: 400;

    color: #30433d;
}

.vm-visi-card strong {
    color: #08783f;
    font-weight: 700;
}


/* =========================================================
   MISI INTRO
   ========================================================= */

.vm-intro {
    max-width: 760px;

    margin: 0 0 24px 49px;

    font-size: 14px;
    line-height: 1.75;

    color: #687873;
}


/* =========================================================
   MISI GRID
   ========================================================= */

.vm-grid {
    display: grid;

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

    gap: 14px;

    margin-left: 49px;
}


/* =========================================================
   MISI CARD
   ========================================================= */

.vm-card {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 23px 24px;

    background: #ffffff;

    border: 1px solid #e4e9e7;
    border-radius: 6px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.vm-card:hover {
    border-color: #cbdad3;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.045);

    transform: translateY(-2px);
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.vm-card-number {
    flex: 0 0 auto;

    font-size: 11px;
    font-weight: 700;

    color: #08783f;
}


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

.vm-card h3 {
    margin: 0 0 6px;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;

    color: #203a33;
}

.vm-card p {
    margin: 0;

    font-size: 13px;
    line-height: 1.65;

    color: #71807b;
}


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

@media (max-width: 768px) {

    .vm-section {
        margin-bottom: 42px;
    }

    .vm-section-heading {
        gap: 14px;
        margin-bottom: 20px;
    }

    .vm-section-heading h2 {
        font-size: 24px;
    }

    .vm-visi-card {
        padding: 28px 24px;
    }

    .vm-visi-card p {
        font-size: 17px;
        line-height: 1.65;
    }

    .vm-intro,
    .vm-grid {
        margin-left: 0;
    }

    .vm-grid {
        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 480px) {

    .vm-section-heading {
        gap: 11px;
    }

    .vm-number {
        font-size: 11px;
    }

    .vm-label {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .vm-section-heading h2 {
        font-size: 22px;
    }

    .vm-visi-card {
        padding: 24px 20px;
    }

    .vm-visi-card p {
        font-size: 16px;
    }

    .vm-card {
        padding: 20px;
    }
}