/*!
Theme Name: Portal POP ver2 2021
Theme URI: 
Author: Team
Author URI: 
Description: Theme untuk Portal POP
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2019 CreativeThemes.
Text Domain:
Tags: 
*/


/* =========== Global Style portal POP =========== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --main-color: #225685;
    --main-color-100: #0190D4;
    --yellow-100: #f7cd00;
    --yellow-200: #e9b300;
    --grey-100: #E6E6E6;
    --medium: 500px;
}

a {
    text-decoration: none;
}

.fw-medium {
    font-weight: var(--medium);
}

body {
    font-family: 'Inter', sans-serif;
}

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

.bg-foot-color {
    background-color: var(--grey-100);
}

.txt-main-color {
    color: var(--main-color);
}

.txt-main-color-100 {
    color: var(--main-color-100);
}

.txt-yellow-100 {
    color: var(--yellow-100);
}

.navbar-text {
    line-height: 17px;
    font-size: 12px;
    font-weight: 500;
}


/* peta */
.info-peta {
    text-align: left;
    /* max-height: 400px; */
}

/* =========== Custom Carousel Style =========== */
.carousel-indicators [data-bs-target] {
    background-color: var(--yellow-100);
    width: 12px;
    height: 10px;
}

.carousel-indicators {
    right: unset;
}

#video-promo .carousel-indicators {
    right: 30px;
    bottom: -8%;
    left: unset;
    margin-right: unset;
}


/* =========== Custom Card For Maps =========== */
.card-maps-box {
    border: 3px solid var(--main-color-100);
    border-radius: 35px;
}

/* =========== Section Skema Style =========== */
.box-skema-title h3 {
    border: 3px solid var(--yellow-100);
    color: var(--yellow-100);
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 10px;
}

.barrier-line {
    padding: 0 2%;
    border-right: 2px dashed rgb(219, 219, 219);
}

.float-button-skema {
    position: absolute;
    bottom: -3.5%;
    left: 45%;
}

/* =========== Section Unduhan Style =========== */
#unduhan a {
    text-decoration: none;
    color: unset;
}

/* =========== Section Detail POP =========== */
.table-pop table,
th,
tr,
td {
    border: 5px solid white;
    vertical-align: middle;
}

.separator-line {
    width: 40%;
    border-bottom: 3px solid var(--grey-100);
    margin-top: 4%;
}


/* =========== Section Detail Profil =========== */
.bg-profil-sec::before {
    content: '';
    background: url(https://cdn.siap.id/s3/simpkb/asset%20img/Organisasi-penggerak/img-ilust-profil-rev.png) no-repeat right top !important;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}


/* =========== New Toggler Nav =========== */
.offcanvas {
    background-color: var(--main-color);
}

.offcanvas-end {
    width: 275px;
}

.offcanvas-body.btn {
    width: 100%;
}

.btn-close {
    color: rgb(255, 255, 255) !important;
    background: url(https://cdn.siap.id/s3/simpkb/asset%20img/Organisasi-penggerak/close-button.svg) center/1em auto no-repeat;
}



/* =========== FAB Style =========== */
.box-sosmed {
    width: 50px;
    height: 50px;
    box-shadow: 2px 2px 20px rgba(242, 255, 207, 0.2);
    border-radius: 50px;
    color: #FFF;
    text-align: center;
}

.box-sosmed:hover {
    background-color: var(--yellow-200);
}

.float {
    position: fixed;
    bottom: 5%;
    left: 3%;
    z-index: 100;
}

.float>.facebook {
    margin-bottom: 60px;
}

.float>.youtube {
    margin-bottom: 120px;
}

.float>.instagram {
    margin-bottom: 180px;
    background: rgb(255, 237, 82);
    background: linear-gradient(45deg, rgba(255, 237, 82, 1) 0%, rgba(255, 94, 49, 1) 38%, rgba(138, 67, 191, 1) 100%);
}

.my-float {
    margin-top: 16px;
    font-size: 20px;
}

/* =========== Detail profil OMS Style =========== */
.bg-detail-profil {
    position: relative;
}

.bg-detail-profil::after {
    content: '';
    background: url(https://cdn.siap.id/s3/simpkb/asset%20img/Organisasi-penggerak/bg-detail-oms-Man.svg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 10vmax;
    position: fixed;
    top: 100px;
    left: 0;
    bottom: 0;
    right: 5%;
    z-index: 10;
}

.bg-detail-profil::before {
    content: '';
    background: url(https://cdn.siap.id/s3/simpkb/asset%20img/Organisasi-penggerak/bg-detail-oms-Woman.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 12vmax;
    position: fixed;
    top: 55%;
    left: 3%;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.accordion-header li {
    margin-left: 15px;
}

#profil-video {
    background: url(https://cdn.siap.id/s3/simpkb/asset%20img/Organisasi-penggerak/bg_profil.jpg) no-repeat left top;
    border-top: 3px solid var(--yellow-200);
    margin-top: 2.9%;
}


/* =========== search state style =========== */
.img-greyscale {
    -webkit-filter: grayscale(0.9);
    filter: grayscale(0.9);
    opacity: 0.8;
}

.search-found {
    border-left: 4px solid #10c910;
    padding: 0 8px;
}


/* =========== Resposive Tampilan Mobile =========== */
@media (max-width: 576px) {
    .navbar-text {
        margin-left: -15%;
    }

    .barrier-line {
        padding: 0 5%;
        border-right: unset;
        border-bottom: 2px dashed rgb(219, 219, 219);
    }

    .float-button-skema {
        bottom: -1% !important;
        left: 30% !important;
    }

    .bg-profil-sec::before {
        display: none;
    }

    .nav-link {
        align-items: center;
    }

    .bg-detail-profil::after {
        opacity: 0.1;
        margin-top: 70vh;
        position: fixed;
    }

    .bg-detail-profil::before {
        opacity: 0.1;
        margin-top: 70vh;
        position: fixed;
    }

}

/* =========== Resposive Tampilan Tablet =========== */
@media (max-width: 991.98px) {
    .bg-profil-sec::before {
        opacity: 0.1;
    }

    .float-button-skema {
        position: absolute;
        bottom: -2%;
        left: 40%;
    }

    .bg-detail-profil::after {
        opacity: 0.1;
        margin-top: 70vh;
        position: fixed;
    }

    .bg-detail-profil::before {
        opacity: 0.1;
        margin-top: 70vh;
        position: fixed;
    }

}