@font-face {
    font-family: "Poppins";
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Thin.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 100;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Thin.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-ExtraLight.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 200;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-ExtraLightItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-LightItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Italic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-MediumItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-SemiBoldItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-BoldItalic.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Cooper/CooperLtBT-Regular.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 100;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Cooper/CooperLtBT-Italic.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Cooper/CooperMdBT-Regular.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Cooper/CooperMdBT-Italic.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Cooper/CooperLtBT-Bold.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Cooper/CooperLtBT-BoldItalic.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Cooper/CooperBlkBT-Regular.ttf);
}
@font-face {
    font-family: "Cooper";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Cooper/CooperBlkBT-Italic.ttf);
}
:root {
    --bg-alice-blue: #f0f8ff;
    --light-yellow: #fbf4d8;
    --light-green: #e9f1e4;
    --bg-pink: #f6efff;
    --blue-btn: #018abe;
}
* {
    font-family: Poppins !important;
    color: #555555 !important;
    font-size: 16px !important;
    font-display: swap;
    font-weight: normal !important;
    line-height: 1.5 !important;
}
a {
    text-decoration: none;
}
.btn-sm {
    font-size: 14px !important;
}
.mt-80 {
    margin-top: 80px !important;
}
.container {
    margin: auto;
}
.home-header{
    height: 750px;
}
.illustration {
    width: 60%;
    height: 750px;
    position: relative;
}
.logo {
    width: 40%;
    height: 750px;
    position: relative;
}
.hutan {
    width: 370px;
    height: 247px;
    position: absolute;
    left: 0;
    top: 230px;
    z-index: 100;
    box-shadow: rgb(0 0 0 / 0.35) 0 5px 15px;
    border-radius: 10px;
}
.sungai {
    height: 688px;
    width: 509px;
    position: absolute;
    right: 50px;
    top: 30px;
    z-index: 99;
    box-shadow: rgb(0 0 0 / 0.35) 0 5px 15px;
    border-radius: 10px;
}
img#logo {
    height: 120px;
    width: auto;
}
.sekilas {
    position: absolute;
    bottom: 50px;
}
.list-articles {
    padding: 50px 0;
    border-top: 1px solid #e8e8e7;
}
.item-article .thumbnail {
    text-align: center;
    width: 200px;
}
/* .item-article .thumbnail img {
    width: 150px;
    height: auto;
} */
.item-article .category,
.category-book,
.paragraf-1 .category,
.paragraf-1-mobile .category {
    font-size: 14px !important;
    text-transform: uppercase;
    margin-bottom: 0 !important;
}
.item-article .title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
}
.item-article .description,
.paragraf-1 .description {
    margin-top: 20px !important;
}
.book-home {
    padding: 50px 0;
}
.main-book-cover img {
    width: 200px;
    height: auto;
}
.book-cover,
.book-info {
    position: relative;
}
.others-book-cover {
    background-color: #fff;
    position: absolute;
    left: 170px;
    top: 70px;
    border-radius: 20px;
}
.others-book-cover {
    display: inline-block;
}
.others-book-cover img {
    width: 100px;
    height: auto;
}
.rotated-text {
    transform: rotate(-90deg);
}
.sekilas-book {
    position: absolute;
    bottom: 0;
    padding-right: 50px !important;
}
.title-book {
    font-size: 20px !important;
    font-weight: 700;
    margin-bottom: 5px !important;
}
.author-book {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
}
.footer {
    margin-top: 20px;
    border-top: 1px solid #e8e8e7;
    padding-top: 30px !important;
}
#logo-footer {
    width: 200px;
    height: auto;
}
.header-cerita {
    height: 400px;
    margin-bottom: 50px;
    margin-top: 20px;
}
.paragraph-cerita {
    width: 60%;
    position: relative;
    height: 400px;
}
.thumbnail-cerita {
    width: 40%;
    position: relative;
}
.thumbnail-cerita-kecil {
    text-align: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.paragraf-1 .title,
.paragraf-1-mobile .title {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
}
.paragraf-1 {
    position: absolute;
    bottom: 0;
}
.huruf-pertama {
    font-size: 27px !important;
    font-weight: bold !important;
}
.isi-cerita {
    max-width: 100%;
}
.isi-cerita p,
.list-thumb-cerita {
    margin-bottom: 20px !important;
}
.thumb-cerita {
    text-align: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.thumb-cerita img {
    height: 300px;
    width: auto;
}
.gmbar-tengah img {
    max-width: 100%;
    height: auto;
}
.header-cerita-mobile {
    display: none;
}
.article-lainnya {
    margin-top: 80px;
    padding: 50px 0;
    border-top: 1px solid #e8e8e7;
}
.article-lainnya h2 {
    font-size: 20px !important;
    text-align: center;
    font-weight: 700;
    margin-bottom: 50px;
}
.header-category {
    margin-bottom: 20px;
}
.nav {
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;
    display: -moz-box;
}
.nav > li {
    float: none;
}
.thumbnail-cerita-besar img {
    width: 250px;
    height: auto;
}
@media (max-width: 1199.98px) {
    .illustration {
        width: 65%;
    }
    .logo {
        width: 35%;
    }
    .hutan {
        width: 270px;
        height: auto;
        position: absolute;
        left: 0;
        top: 200px;
    }
    .sungai {
        height: 560px;
        width: auto;
        position: absolute;
        left: 130px;
        top: 30px;
        z-index: 99;
        box-shadow: rgb(0 0 0 / 0.35) 0 5px 15px;
        border-radius: 10px;
    }
    img#logo {
        height: 100px;
        width: auto;
    }
    .list-articles {
        margin-top: 30px;
    }
    .mt-80{
        margin-top: 0 !important;
    }
}
@media (max-width: 991.98px) {
    .illustration,
    .book-cover,
    .thumbnail-cerita-kecil {
        display: none;
    }
    .logo {
        width: 100%;
        height: 270px;
    }
    .list-articles {
        margin-top: 0;
    }
    .sekilas-book {
        position: relative;
        padding-right: 0 !important;
    }
    .header-cerita,
    .paragraph-cerita,
    .thumbnail-cerita {
        height: 500px;
    }
    .thumbnail-cerita-besar {
        position: absolute;
        bottom: 0;
    }
    .home-header{
        height: 250px !important;
    }
}
@media (max-width: 575.98px) {
    .item-article .thumbnail {
        text-align: center;
        width: 100px;
        height: 100px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    img#logo {
        height: 100px;
        width: auto;
    }
    #logo-footer {
        width: 150px;
        height: auto;
    }
    .header-cerita {
        display: none;
    }
    .header-cerita-mobile {
        display: block;
    }
    .sekilas{
        position: relative;
        bottom: 0 !important;
        margin-top: 10px !important;
    }
}