/* ? font sekolah penggerak */
@import url("https://fonts.googleapis.com/css2?family=Frijole&display=swap");

:root {
    --white: #fff;
    --light: #f6f6f6;
    --dark: #343a40;
    --hijau: #073e29;
    --hijau-muda: #92e3a9;
    --hitam: #1e293b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ? Dekstop */
@media screen and (min-width: 992px) {
    /* ? Start About / Misi Visi ============================ */
    .visi__misi .about__us h2 {
        font-size: 60px;
        font-weight: bold;
    }

    .visi__misi .text__about {
        font-size: 14px;
        text-align: justify;
        font-weight: normal;
        font-family: sans-serif;
    }

    .kotak__visiMisi {
        width: 100px;
        height: 30px;
        background-color: var(--dark);
        margin: auto;
        border-radius: 50px;
        transition: all 0.3s ease;
    }

    .kotak__visiMisi:hover {
        box-shadow: 1px 1px 10px 3px var(--dark);
    }

    .kotak__visiMisi p {
        text-align: center;
        color: var(--white);
        line-height: 30px;
    }

    .visi-misi {
        margin-top: 10px;
    }

    .visi-misi h2 {
        font-size: 50px;
        text-align: center;
        font-weight: 700;
        color: var(--hitam);
        text-shadow: 3px 3px 1px var(--hijau-muda);
    }

    .card__visi__misi {
        width: 100%;
        height: 450px;
        border: 1px solid var(--hijau);
        box-shadow: rgba(146, 227, 169, 0.09) 0px 2px 1px,
            rgba(146, 227, 169, 0.09) 0px 4px 2px,
            rgba(146, 227, 169, 0.09) 0px 8px 4px,
            rgba(146, 227, 169, 0.09) 0px 16px 8px,
            rgba(146, 227, 169, 0.09) 0px 32px 16px;
    }

    .logo__visi__misi {
        width: 150px;
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    /* ? End About / Misi Visi ============================ */
}
/* ? Tablet */
@media (min-width: 641px) and (max-width: 991px) {
    /* ? Start About / Misi Visi ============================ */
    .visi__misi .about__us h2 {
        font-size: 40px;
        font-weight: bold;
    }

    .visi__misi .text__about {
        font-size: 12px;
        text-align: justify;
        font-weight: normal;
        font-family: sans-serif;
    }

    .kotak__visiMisi {
        width: 100px;
        height: 30px;
        border: 2px solid var(--hijau);
        margin: auto;
        border-radius: 50px;
    }

    .kotak__visiMisi p {
        text-align: center;
        color: var(--hijau);
        line-height: 25px;
    }

    .visi-misi {
        margin-top: 10px;
    }

    .visi-misi h2 {
        font-size: 30px;
        text-align: center;
        font-weight: 700;
        color: var(--dark);
        text-shadow: 3px 3px 1px var(--hijau-muda);
    }

    .card__visi__misi {
        width: 100%;
        height: 450px;
        margin: 20px 20px 20px 20px;
        border: 1px solid var(--hijau);
        box-shadow: rgba(146, 227, 169, 0.09) 0px 2px 1px,
            rgba(146, 227, 169, 0.09) 0px 4px 2px,
            rgba(146, 227, 169, 0.09) 0px 8px 4px,
            rgba(146, 227, 169, 0.09) 0px 16px 8px,
            rgba(146, 227, 169, 0.09) 0px 32px 16px;
    }

    .logo__visi__misi {
        width: 140px;
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    .card__body__visi__misi p,
    .card__body__visi__misi ol > li {
        font-size: 12px;
    }

    /* ? End About / Misi Visi ============================ */
}
/* ? Handphone */
@media screen and (max-width: 640px) {
    /* ? Start About / Misi Visi ============================ */
    .visi__misi .about__us h2 {
        font-size: 30px;
        font-weight: bold;
        margin-left: 18px;
    }

    .visi__misi .text__about {
        font-size: 12px;
        text-align: justify;
        font-weight: normal;
        font-family: sans-serif;
    }

    .kotak__visiMisi {
        width: 100px;
        height: 30px;
        border: 2px solid var(--hijau);
        margin: auto;
        border-radius: 50px;
    }

    .kotak__visiMisi p {
        text-align: center;
        color: var(--hijau);
        line-height: 25px;
    }

    .visi-misi {
        margin-top: 10px;
    }

    .visi-misi h2 {
        font-size: 30px;
        text-align: center;
        font-weight: 700;
        color: var(--dark);
        text-shadow: 3px 3px 1px var(--hijau-muda);
    }

    .card__visi__misi {
        width: 90% !important;
        height: 500px !important;
        margin: 20px 20px 20px 20px;
        border: 1px solid var(--hijau);
        box-shadow: rgba(146, 227, 169, 0.09) 0px 2px 1px,
            rgba(146, 227, 169, 0.09) 0px 4px 2px,
            rgba(146, 227, 169, 0.09) 0px 8px 4px,
            rgba(146, 227, 169, 0.09) 0px 16px 8px,
            rgba(146, 227, 169, 0.09) 0px 32px 16px;
    }

    .logo__visi__misi {
        width: 100px;
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    .card__body__visi__misi .pVisi,
    .card__body__visi__misi .pMisi {
        font-size: 12px !important;
    }
    /* .card__body__visi__misi ol > li {
        font-size: 12px !important;
    } */

    .card__body__visi__misi small {
        font-size: 12px !important;
    }

    /* ? End About / Misi Visi ============================ */
}