body {
    background-color: #e0dad5;
}

.narasi {
    font-size: 1.25rem;
    text-align: justify;
    text-justify: inter-word;
}

.img-aktivitas {
    /*max-width: 286.5px;*/
    max-height: 191px;
    object-fit: cover;
}

.text-diatas-gambar-kiri,
.text-diatas-gambar-kanan {
    position: absolute;
    font-size: 2vw; /* Use viewport width for responsive font size */
    color: white;
    text-decoration: none;
}

.text-diatas-gambar-kiri:hover,
.text-diatas-gambar-kanan:hover {
    text-decoration: underline;
}

.text-diatas-gambar-kiri {
    top: 40%; /* Adjust vertical position */
    left: 20%; /* Adjust horizontal position */
}

.text-diatas-gambar-kanan {
    top: 40%; /* Adjust vertical position */
    right: 15%; /* Adjust horizontal position */
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
    .text-diatas-gambar-kiri,
    .text-diatas-gambar-kanan {
        font-size: 5vw; /* Increase font size for smaller screens */
        top: 15%; /* Adjust vertical position for smaller screens */
    }
}

.card-body a {
    text-decoration: none;
}

.card-body a:hover {
    text-decoration: underline;
}

.ditutup {
    filter: brightness(40%);
}

.text-tengah-gambar {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.judul-materi {
    font-weight: bold !important;
    font-size: 2.5rem !important;
    color: #000000;
}

.biru-bgbl {
    color: #0247a4 !important;
}

.text-kuning {
    font-weight: bold !important;
    color: #F6C370 !important;
}

.bgbl-font {
    font-family: 'More Sugar', sans-serif !important;
    text-decoration: none;
}

.bgbl-pengumuman {
    background-color: #0247a4 !important;
    color: #ffffff;
    text-align: center;
    font-family: 'More Sugar', sans-serif !important;
}

.bgbl-head {
    font-size: clamp(2.5rem, 5vw, 5rem);
    color: #ffffff;
    font-weight: bold;
    margin-left: -14rem !important;
    position: absolute;
    top: 1rem;
    font-family: 'More Sugar', sans-serif !important;
}

.bgbl-text {
    margin-top: 16rem !important;
    font-size: 1.25rem;
    font-weight: bold;
}

.bgbl-btn {
    font-family: 'More Sugar', sans-serif !important;
    margin-top: 10rem !important;
    background-color: #0247a4 !important;
}

.bgbl-btn2 {
    font-family: 'More Sugar', sans-serif !important;
    background-color: #0247a4 !important;
}

.bgbl-btn3 {
    font-family: 'More Sugar', sans-serif !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.bgbl-btn4 {
    font-family: 'More Sugar', sans-serif !important;
    background-color: #0247a4 !important;
    color: #ffffff !important;
}

.header-btn {
    background-color: #F6C370 !important;
}

.img_thumbnail {
    max-width: 220px;
}

.hal_materi {
    margin-top: 7%;
}

@media (max-width: 767.98px) {
    .bgbl-head {
        position: static !important;
        margin-left: 0 !important;
        margin-top: -1rem !important;
        font-size: 2.5rem !important;
        text-align: left;
        color: #0247a4 !important;
    }
    .bgbl-text {
        margin-top: 1rem !important;
        font-size: 1rem !important;
        color: #333333 !important; /* Adjust color */
    }
    .bgbl-btn {
        margin-top: 1.5rem !important;
        align-self: flex-start !important;
        font-size: 1rem !important;
    }
    /* Add some padding inside the right column */
    .col-md-4 {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 1rem;
    }
}

.custom-blue-border {
    border-color: #0247a4 !important;
}

.fixed-left {
    margin-left: -9%;
    margin-right: 8px;
}

.judul-blog {
    margin-top: -15px;
}

/* Pagination styling */
.pagination .page-item {
    margin: 0 2px;
}
.pagination .page-link {
    color: #0247a4;
    border: 1px solid #0247a4;
    background-color: white;
    transition: all 0.3s ease;
}
.pagination .page-item.active .page-link {
    background-color: #0247a4;
    border-color: #0247a4;
    color: white;
}
.pagination .page-link:hover {
    background-color: #0247a4;
    color: white;
    border-color: #0247a4;
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    border-color: #dee2e6;
    background-color: white;
}


/* @font-face {
    font-family: 'More Sugar';
    src: url('../assets/fonts/more-sugar/more_sugar_font/moresugar-regular-webfont.woff2') format('woff2'),
         url('../assets/fonts/more-sugar/more_sugar_font/moresugar-regular-webfont.woff') format('woff'),
         url('../assets/fonts/more-sugar/more_sugar_font/MoreSugar-Regular.ttf') format('truetype'),
         url('../assets/fonts/more-sugar/more_sugar_font/MoreSugar-Regular.otf') format('opentype');
    
    font-weight: normal;
    font-style: normal;
} */