/* warna custom */
/* warna utama */
.bg-utama{
    --bs-bg-opacity: 1;
    background-color: var(--warna-utama) !important;
}

/* warna kedua */
.bg-kedua{
    --bs-bg-opacity: 1;
    background-color: var(--warna-kedua) !important;
}

/* warna card */
.card{
    --bs-bg-opacity: 1;
    background-color: var(--warna-card) !important;
}

/* warna hover */
/* navbar */
nav.navbar-bawah a.nav-link.nav-active{
    color: var(--warna-kedua) !important;
}
.navbar-bawah .navbar-nav a.nav-link{
    color: white;
}
.navbar-bawah .navbar-nav a.nav-link:hover{
    color: var(--warna-hover) !important;
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler {
    border: 1px solid white;
    color: white;
}
/* footer */
.footer-menu a.text-decoration-none{
    color: white;
}
.footer-menu a.text-decoration-none:hover{
    color: var(--warna-hover) !important;
}

/* artikel */
.artikel{
    color: var(--warna-text) !important;
}

/* warna custom button */
.btn-warna-setting{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--warna-tombol);
    --bs-btn-border-color: var(--warna-tombol);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--warna-tombol);
    --bs-btn-hover-border-color: var(--warna-tombol);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--warna-tombol);
    --bs-btn-active-border-color: var(--warna-tombol);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--warna-tombol);
    --bs-btn-disabled-border-color: var(--warna-tombol);
}
.btn-warna-utama{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--warna-utama);
    --bs-btn-border-color: var(--warna-utama);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warna-utama);
    --bs-btn-hover-border-color: var(--warna-utama);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--warna-utama);
    --bs-btn-active-border-color: var(--warna-utama);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--warna-utama);
    --bs-btn-disabled-border-color: var(--warna-utama);
}
.btn-warna-kedua{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--warna-kedua);
    --bs-btn-border-color: var(--warna-kedua);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--warna-kedua);
    --bs-btn-hover-border-color: var(--warna-kedua);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--warna-kedua);
    --bs-btn-active-border-color: var(--warna-kedua);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--warna-kedua);
    --bs-btn-disabled-border-color: var(--warna-kedua);
}
.btn-wa{
    color: #fff;
    background-color: var(--warna-kedua-darken) !important;
}

/* custom pagination */
.pagination .page-item.active .page-link {
    background-color: var(--warna-tombol);
    border-color: var(--warna-tombol);
}
ul.pagination a.page-link{
    color: var(--warna-tombol);
}
ul.pagination a.page-link:hover{
    color: var(--warna-tombol);
}

/* custom font berdasar data dr setting general */
h1{
    font-family: var(--font-h1) !important;
}
h2{
    font-family: var(--font-h2) !important;
}
h3{
    font-family: var(--font-h3) !important;
}
h4{
    font-family: var(--font-h4) !important;
}
h5{
    font-family: var(--font-h5) !important;
}
p{
    font-family: var(--font-p) !important;
}
span{
    font-family: var(--font-span) !important;
}
body{
    font-family: var(--font-utama) !important;
}

/* btn soft abu */
.btn-soft-abu{
    --bs-btn-color: #000;
    --bs-btn-bg: #EBEBEB;
    --bs-btn-border-color: #EBEBEB;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #EBEBEB;
    --bs-btn-hover-border-color: #EBEBEB;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #EBEBEB;
    --bs-btn-active-border-color: #EBEBEB;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #EBEBEB;
    --bs-btn-disabled-border-color: #EBEBEB;
}
/* bg soft abu */
.bg-soft-abu{
    --bs-bg-opacity: 1;
    background-color: #F8F8F8 !important;
}

.btn-cyan-blue{
    --bs-btn-color: #000;
    --bs-btn-bg: #1DBECB;
    --bs-btn-border-color: #1DBECB;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #1DBECB;
    --bs-btn-hover-border-color: #1DBECB;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #1DBECB;
    --bs-btn-active-border-color: #1DBECB;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #1DBECB;
    --bs-btn-disabled-border-color: #1DBECB;
}
.bg-cyan-blue {
    --bs-bg-opacity: 1;
    background-color: rgba(29, 190, 203, var(--bs-bg-opacity)) !important;
}
.btn-secondary-color {
    color: #1e2a508a;
    --bs-btn-color: #fff;
    --bs-btn-bg: #EDEDED;
    --bs-btn-border-color: #EDEDED;
    --bs-btn-hover-color: #0f121d8a;
    --bs-btn-hover-bg: #EDEDED;
    --bs-btn-hover-border-color: #EDEDED;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #EDEDED;
    --bs-btn-active-border-color: #EDEDED;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #EDEDED;
    --bs-btn-disabled-border-color: #EDEDED;
}



/* end warna custom */
body{
    background-color: #f8f8f8;
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1E2A50;
    --bs-btn-border-color: #1E2A50;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #23315c;
    --bs-btn-hover-border-color: #23315c;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #23315c;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1E2A50;
    --bs-btn-disabled-border-color: #1E2A50;
}

/* header */
.navbar-search-mobile{
    display: none;
}

@media only screen and (max-width: 992px) {
    .navbar-bawah .navbar-nav a.nav-link{
        text-align: center;
        color: #000;
    }
    .navbar-bawah .navbar-nav{
        background-color: #fff;
    }
    .navbar-search{
        display: none;
    }
    .navbar-search-mobile{
        display: block;
    }
}

/* footer */
.footer-header{
    margin-bottom: 7%;
}

.cerise-link{
    color: #FDD217;
    text-decoration: none;
}

.btn-kontak-layanan{
    width: 100%;
}

.desc-footer{
    text-align: center;
}

@media only screen and (max-width: 992px) {
    .kontak-layanan{
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .sosmed{
        margin-bottom: 7%;
    }
    .desc-footer{
        text-align: justify;
    }
}