/* Navbar */
.navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.navbar-nav>li {
    display: inline-block;
    float: none;
}

.navbar-nav>li {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.navbar.navbar-plain .navbar-nav .nav-item .nav-link {
    color: #268374;
    opacity: 0.5;
}

.navbar.navbar-plain .navbar-nav .nav-item .nav-link:hover {
    color: #268374;
    opacity: 1;
}

.navbar.navbar-plain .navbar-nav .nav-item.active .nav-link {
    color: #268374;
    opacity: 1;
    font-weight: 500;
}

.navbar.navbar-banner .navbar-nav .nav-item .nav-link {
    color: white;
    opacity: 0.5;
}

.navbar.navbar-banner .navbar-nav .nav-item .nav-link:hover {
    color: white;
    opacity: 1;
}

.navbar.navbar-banner .navbar-nav .nav-item.active .nav-link {
    color: white;
    opacity: 1;
    font-weight: 500;
}

#navigation,
.navbar.navbar {
    background-color: white !important;
}

#navigation-banner {
    position: relative;
    height: var(--height);
    width: 100%;
    z-index: 2;
    align-items: flex-start;
}

#navigation-banner::before,
#navigation-banner::after {
    content: '';
    /* background-image: url("/assets/images/bg-about-us.png"); */
    background-image: var(--background);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

#navigation-banner::before {
    position: fixed;
    width: 100%;
    z-index: -1;
}

#navigation-banner::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: var(--height);
}

#navigation-banner .navbar.navbar-banner {
    background-color: #00000063 !important;
}

#navigation-banner nav {
    position: fixed;
    width: 100%;
}

.navbar {
    padding: 1rem 3rem;
}

.navbar-collapse {
    margin-top: 0.70rem;
}

@media only screen and (max-width: 600px) {
    #navigation-banner::before,
    #navigation-banner::after {
        background-size: auto;
    }

    #navigation-banner .navbar.navbar-banner{
        background: white !important;
        z-index: 3;
    }

    #navigation-banner .navbar.navbar-banner .nav-link{
        color: green;
    }
}
/* END Navbar */

.header-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    width: 35%;
}

.header-text h1 {
    font-weight: 400;
}

.header-text .link {
    color: #24AA4A;
    font-weight: 500;
}

.header-text .btn-cta {
    margin-top: 2rem;
    padding: 0.85rem 1.85rem;
    font-weight: 500;
}

.header-text-left {
    text-align: left;
    top: 55%;
    left: 12%;
    margin: 0 8rem;
}

.header-text-left a {
    color: white;
    text-decoration: none;
}

/* Landing Page */
.div-landing-page {
    margin: 0 0rem;
    font-weight: 800;
}

.div-highlight-feature {
    margin-top: 10rem;
    text-align: center;
    margin-bottom: 5rem;
}

.div-highlight-feature h2 {
    font-weight: 600;
}

.card-highlight {
    position: relative;
    /* top: 35%; */
    padding: 1rem 2rem;
    margin: 3rem 0.5rem;
    background-color: white;
    border: 0;
    z-index: 3;
    border-radius: 10px;
    box-shadow: 0px 10px 15px #e1e1e1;
    width: 50%
}

.card-highlight h4 {
    margin-top: 0.5rem;
    text-align: left;
    z-index: 1;
    font-weight: 600;
}

#card-highlight-1{
    float: right;
}

.div-big-banner {
    position: relative;
    z-index: -1;
    height: 80vh;
    background-image: url("/assets/images/img-landing-page.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

.div-big-banner .content {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 4rem;
}

.div-big-banner h1,
.div-big-banner p {
    color: white;
}

.div-big-banner h1 {
    margin-bottom: 1.75rem;
    font-weight: 600;
}

.div-big-banner p {
    font-weight: 400;
}

.div-big-banner .attachment {
    margin-top: 4rem;
}

.div-big-banner .attachment a {
    color: white;
    text-decoration: none;
}

.div-big-banner .attachment a .a-text {
    text-decoration: underline;
}

.div-related-links {
    background-color: #24AA4A;
    padding: 5rem 4rem;
    border-radius: 30px 30px 0 0;
    margin-top: -2rem;
}

.div-related-links .content h4 {
    color: white;
    font-weight: 600;
    font-size: 20pt;
}

.div-related-links .content p {
    font-weight: 200;
    margin-top: 1.2rem;
    color: white;
}

.div-related-links .content .item h6.title {
    color: white;
    font-weight: 600;
    margin-top: 1.2rem;
    margin-bottom: 0;
}

.div-related-links .content .item a {
    text-decoration: none;
    color: white;
}

.div-related-links .content .item p {
    margin-top: 0.75rem;
}

#background-video {
    height: var(--height);
    width: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

@media (max-width: 1200px) {
    .div-highlight-feature {
        margin-top: 12rem;
    }

    .card-highlight {
        width: 60%;
    }
}

@media only screen and (max-width: 600px) {
    .header-text{
        width: 80% !important;
    }

    .card-highlight{
        width: 95% !important;
        float: none !important;;
    }

    .div-big-banner{
        height: 60vh;
        background-size: auto;
    }
    
    .div-big-banner .content{
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .div-related-links .content .item{
        margin-top: 1.25rem;
    }

    .div-related-links{
        padding: 4rem 3rem;
    }

    .div-highlight-feature{
        margin-bottom: 3rem;
    }
}
/* END Landing Page */

/* About Us */
.div-about-us {
    margin: 0 8rem;
    font-weight: 800;
    padding-top: 5rem;
}

.card-vision {
    position: relative;
    /* top: 35%; */
    padding: 4rem 0rem 4rem 8rem;
    background-color: white;
    border: 0;
    z-index: 3;
    border-radius: 10px;
}

.card-vision h2,
li {
    text-align: left;
    z-index: 1;
}

.yellow-dot {
    display: inline-block;
    position: relative;
    padding: 20px 0px;
    color: #F1ED1B;
}

.yellow-dot::after {
    transform: translateX(-50%);
    border-radius: 100%;
    position: absolute;
    background: #F1ED1B;
    bottom: 5px;
    height: 25px;
    content: '';
    width: 25px;
    left: 100%;
    z-index: 0;
    box-shadow: 0px 0px 25px .6em #F1ED1B;

}

.div-about-us .text-h2 {
    position: relative;
    left: -1%;
}

.div-about-us .col-pict-text {
    margin: auto;
}

.div-about-us .col-pict-text h1 {
    color: #14AE5C;
}

.div-pict .round-yellow-bg::after {
    transform: translateX(-50%);
    border-radius: 100%;
    position: absolute;
    bottom: -60%;
    height: 20rem;
    content: '';
    width: 20rem;
    left: 2%;
    z-index: 0;
    opacity: 0.15;
    background: radial-gradient(yellow, #ffffff);
}

.div-pict .round-green-bg::after {
    transform: translateX(-50%);
    border-radius: 100%;
    position: absolute;
    bottom: -70%;
    height: 20rem;
    content: '';
    width: 20rem;
    left: 15%;
    z-index: 0;
    opacity: 0.2;
    background: radial-gradient(#B8F1CF, #ffffff);
}

.div-program {
    margin-top: 5rem;
}

.div-program p {
    margin-top: 1rem;
    color: #4D5053;
}

.div-program .card-program {
    padding: 1rem 0 0rem 1.5rem;
    background-color: #F4F6FA;
    border: 0;
    border-radius: 15px;
}

.div-program h4 {
    margin-top: 1rem;
}

.div-program .fit-image {
    width: 100%;
    object-fit: cover;
}


@media only screen and (max-width: 600px) {
    .div-about-us {
        margin: 0 1rem;
    }

    .div-about-us .card-vision{
        padding: 3rem 4rem;
    }
}

/* END About Us */

/* Potensi Investasi */
.div-potensi-investasi {
    margin: 0 5rem;
}

.div-content {
    margin: 4rem 0 0 0;
}

.card-category {
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    top: 40%;
    padding: 2.5rem 3rem;
    background-color: white;
    border: 0;
    z-index: 3;
    border-radius: 10px;
    box-shadow: 0px 10px 15px #e1e1e1
}

@media only screen and (min-width: 1200px) {
    .card-category {
        top: 40%;
        padding: 3rem 9rem;
    }
}

.card-category h2,
li {
    text-align: left;
    z-index: 1;
}

@media only screen and (min-width: 1200px) {
    .card-content {
        margin: 0 3rem;
    }
}

.div-detail-content {
    margin-top: 8rem;
}

.div-detail-content .btn-download {
    padding: 0.75rem 1.25rem;
}

.div-source-data {
    background-color: rgba(169, 225, 195, 0.12);
    padding: 1rem;
    border-radius: 10px;
    color: black;
}

.div-source-data p {
    margin-bottom: 0;
    font-weight: 500;
}

.div-source-data p.p-title {
    font-weight: 400;
    font-size: 11pt;
}

@media only screen and (min-width: 1200px) {
    .div-source-data .col-img {
        width: 5%;
    }
}

@media only screen and (max-width: 600px) {
    .div-potensi-investasi {
        margin: 0 1rem;
    }

    .card-category{
        overflow: auto;
    }
}

/* END Potensi Investasi */

/* Profile UMKM */
/* END Profile UMKM */

/* Peluang Investasi */
.div-category-header .label-category {
    font-weight: 500;
    font-size: 13pt;
}

.div-category-header .custom-control-input {
    font-size: 13pt;
}

@media only screen and (max-width: 600px) {
    .div-peluang-investasi .div-radio {
        padding: 1rem;
        text-align: center;
    }
}
/* END Peluang Investasi */

/* Peraturan UU */
.div-peraturan-uu {
    margin: 0 5rem;
}

.div-content-table {
    margin-top: 6rem;
}

@media only screen and (max-width: 600px) {
    .div-peraturan-uu {
        margin: 0 1rem;
    }
}
/* END Peraturan UU */

/* Contact Us */
.div-contact-us {
    margin: 0 8rem;
    color: #5A7184;
}

.div-contact-us h2 {
    color: #000;
    margin-bottom: 2rem;
    font-weight: 600;
}

.div-map h5 {
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: #183B56;
}

.div-map form {
    padding-top: 1.8rem;
}

.div-map form p {
    text-align: justify;
}

@media only screen and (max-width: 600px) {
    .div-contact-us {
        margin: 0 1rem;
    }

    .div-map #map {
        width: 100%;
    }
}


/* END Contact Us */

/* Footer */
footer {
    padding: 5rem 5rem 3rem 5rem;
}

footer .img-logo {
    margin-bottom: 1rem;
}

footer .img-p {
    color: #151439;
    opacity: 0.4;
    margin-bottom: 5rem;
    margin-top: 1rem;
}

footer .a-footer {
    margin-top: 1rem;
}

footer a {
    color: #2C2C2C;
    text-decoration: none;
}

footer a h5 {
    font-size: 14pt;
    margin-bottom: 1rem;
}

footer a p {
    margin-bottom: 0.5rem;
    color: black;
}

footer .a-socmed img {
    margin: 0.2rem 0 0.2rem 0.2rem;
}

@media only screen and (max-width: 600px) {
    footer{
        padding: 4rem 3rem;
    }
}

/* END Footer */
