.bg-theme {
    background-color: var(--accent-color);
}

.bg-main {
    background-color: var(--primary-color);
}

.navbar-transparent {
    background-color: rgba(0, 123, 255, 0.6);
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}


.navbar-solid {
    background-color: var(--primary-color);
    backdrop-filter: none !important;
}

.carousel-item {
    height: 450px;
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
}

.carousel-item-sm {
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
}

@media (min-width: 992px) {
    .carousel-item {
        height: 100vh;
    }

    .navbar-sticky-transparent {
        width: 98%;
    }
}

.carousel-caption-custom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: var(--transparent-color);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    width: 95%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

@media (max-width: 991.98px) {
    .navbar-end {
        justify-content: center !important;
        margin-top: 1rem;
        width: 100%;
    }
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.my-card-list {
    --my-card-col-gap: 2rem;
    --my-card-barH: 1rem;
    --my-card-roleH: 2rem;
    --my-card-flapH: 2rem;
    margin-inline: auto;
    gap: var(--my-card-col-gap);
    padding-inline: calc(var(--my-card-col-gap) / 2);
    list-style: none;
}

.my-card-item {
    box-shadow: var(--bs-box-shadow) !important;
    width: 19em;
    min-height: 420px;
    display: grid;
    grid-template:
        "role"
        "icon"
        "title"
        "descr";
    align-items: flex-start;
    gap: 1rem;
    padding-block-end: calc(var(--my-card-flapH));
    text-align: center;
    background: var(--accent-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.6) var(--my-card-roleH), rgba(0, 0, 0, 0.4) calc(var(--my-card-roleH) + 0.5rem), rgba(0, 0, 0, 0) calc(var(--my-card-roleH) + 0.5rem + 5rem));
    clip-path: polygon(calc(var(--my-card-col-gap) / -2 - 5px) 0, calc(100% + var(--my-card-col-gap) / 2 + 5px) 0, calc(100% + var(--my-card-col-gap) / 2 + 5px) calc(100% - var(--my-card-flapH)), 50% 100%, calc(var(--my-card-col-gap) / -2 - 5px) calc(100% - var(--my-card-flapH)));
}

    /* bar */
    .my-card-item::before {
        content: "";
        grid-area: role;
        height: var(--my-card-barH);
        width: calc(100% + var(--my-card-col-gap));
        margin-left: calc(var(--my-card-col-gap) / -2);
        margin-top: calc(var(--my-card-roleH) / 2 - var(--my-card-barH) / 2);
        background: grey;
        z-index: -1;
        background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.4));
    }

    /* role */
    .my-card-item::after {
        content: "";
        grid-area: role;
        background: var(--accent-color);
        background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.4));
        height: var(--my-card-roleH);
    }

    .my-card-item .my-card-icon,
    .my-card-item .my-card-title,
    .my-card-item .my-card-descr {
        padding-inline: 1rem;
        color: white;
        text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
    }

    .my-card-item .my-card-icon {
        font-size: 3rem;
    }

    .my-card-item .my-card-title {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .my-card-item .my-card-descr {
        font-size: 0.9rem;
    }

.credits {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

    .credits a {
        color: var(--color);
    }

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Pastikan di atas konten lain */
    opacity: 1;
    /* Set opacity awal menjadi 1 */
    transition: opacity 0.5s ease-in-out;
}

.olcards,
.olcards * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.olcards {
    list-style: none;
    counter-reset: cardCount;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    --cardsGap: 1rem;
    gap: var(--cardsGap);
    padding-bottom: var(--cardsGap);
}

    .olcards li {
        counter-increment: cardCount;
        display: flex;
        color: white;
        --labelOffset: 1rem;
        --arrowClipSize: 1.5rem;
        margin-top: var(--labelOffset);
    }

        .olcards li::before {
            content: counter(cardCount, decimal-leading-zero);
            background: white;
            color: var(--accent-color);
            font-size: 2em;
            font-weight: 700;
            transform: translateY(calc(-1 * var(--labelOffset)));
            margin-right: calc(-1 * var(--labelOffset));
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-inline: 0.5em;
        }

        .olcards li .content {
            background-color: var(--accent-color);
            --inlinePadding: 1em;
            --boxPadding: 0.5em;
            display: grid;
            padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize)) var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
            grid-template-areas:
                "icon title"
                "icon text";
            gap: 0.25em 1em;
            clip-path: polygon(0 0, calc(100% - var(--arrowClipSize)) 0, 100% 50%, calc(100% - var(--arrowClipSize)) 100%, calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)), 0 calc(100% + var(--cardsGap)));
            position: relative;
        }

            .olcards li .content::before {
                content: "";
                position: absolute;
                width: var(--labelOffset);
                height: var(--labelOffset);
                background: var(--accent-color);
                left: 0;
                bottom: 0;
                clip-path: polygon(0 0, 100% 0, 0 100%);
                filter: brightness(0.75);
            }

            .olcards li .content::after {
                content: "";
                position: absolute;
                height: var(--cardsGap);
                width: var(--cardsGap);
                background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
                left: 0;
                top: 100%;
            }

        .olcards li .icon {
            grid-area: icon;
            align-self: center;
            font-size: 2em;
        }

        .olcards li .content .title {
            grid-area: title;
            font-size: 1.25em;
            /* font-weight: 700; */
        }

        .olcards li .content .text {
            grid-area: text;
        }

.maps-container iframe {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 0.5rem;
}

.address-container {
    padding: 1rem;
    border-radius: 0.5rem;
}

.container .card-body img {
    max-width: 100%;
}

.img_berita0 {
    width: auto;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.img_berita1 {
    width: auto;
    height: 300px;
    object-fit: contain;
    object-position: center;
}

.img_kegiatan {
    width: auto;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.img_prestasi {
    width: auto;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.bg_grid {
    background: linear-gradient(var(--bg-accent-color), var(--bg-accent-color)), url(/assets/images/grid.jpg) repeat;
    background-size: 800px;
}

#logo-preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-preloader img {
    width: 12vw;
    height: auto;
}