.header-bannerx {
    height: 400px
}

.header-img-height {
    height: 400px
}

.padding-about {
    padding-left: 80px;
    padding-right: 80px
}

.btn-nav-active {
    background: #1c80c3;
    border-radius: 100px;
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%
}

.header-bannerx img {
    object-fit: cover;
    object-position: center
}

@media only screen and (max-width:4096px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 1230px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .marquee-box {
        position: absolute;
        bottom: 0;
        z-index: 9999;
        width: 100%
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:3840px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 1152px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .marquee-box {
        position: absolute;
        bottom: 0;
        z-index: 9999;
        width: 100%
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:2650px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 795px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .marquee-box {
        position: absolute;
        bottom: 0;
        z-index: 9999;
        width: 100%
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:2160px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 647px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .marquee-box {
        position: absolute;
        bottom: 0;
        z-index: 9999;
        width: 100%
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1920px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 575px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .marquee-box {
        position: absolute;
        bottom: 0;
        z-index: 20;
        width: 100%
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1680px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 505px
    }

    .header-img-height {
        height: auto
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1600px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 480px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1536px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 460px
    }

    .header-img-height {
        height: auto
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1514px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 455px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1441px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 432px
    }

    .header-img-height {
        height: auto
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1440px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 432px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }
}

@media only screen and (max-width:1366px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 405px
    }

    .header-img-height {
        height: auto
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1300px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 390px
    }

    .header-img-height {
        height: auto
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1280px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 384px
    }

    .header-img-height {
        height: auto
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1200px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 350px
    }

    .header-img-height {
        height: 350px
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 12px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }

    .drawer-menu .menu-header a.logo img {
        max-width: 190px
    }
}

@media only screen and (max-width:1152px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 350px
    }

    .header-img-height {
        height: 350px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:1024px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 350px
    }

    .header-img-height {
        height: 350px
    }

    .width-acara-container {
        width: 100%
    }

    .img-fluid-2 {
        width: 150px;
        height: 200px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 20px
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:991px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 250px
    }

    .header-img-height {
        height: 250px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 0
    }

    .btn-acara-hm {
        padding-top: 11px;
        padding-left: 17px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }

    .title-product-hm {
        font-size: 14px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:768px) {
    .header-bannerx img {
        object-fit: cover;
        object-position: center
    }

    .header-bannerx {
        height: 250px
    }

    .padding-about {
        padding-left: 0;
        padding-right: 0
    }

    .header-img-height {
        height: 250px
    }

    .img-fluid-2 {
        width: 275px;
        height: 360px
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 0
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:600px) {
    .header-bannerx img {
        object-fit: none;
        object-position: left
    }

    .header-bannerx {
        height: 400px
    }

    .header-img-height {
        height: 400px
    }

    .img-fluid-2 {
        width: 100%;
        height: auto
    }

    .img-fluid-acara {
        width: 100%;
        height: auto
    }

    .navbar {
        background: #FFF;
        opacity: .9;
        box-shadow: 32px 0 54px rgba(36, 107, 159, .156863);
        margin-top: 0
    }

    .breadcrumb-non-sub {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: #424242;
        padding-top: 0
    }

    .dropdown-lang {
        color: #000;
        font-size: 16px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:420px) {
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1055;
        display: none;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        outline: 0
    }

    .modal-title.strong {
        font-size: 16px
    }

    .popup-banner {
        color: #fff;
        font-size: 12px
    }

    /*.img-fluid-popup{max-width:40%;height:auto}*/
    .modal-body {
        position: relative;
        flex: 1 1 auto;
        padding: 0rem
    }

    .fs-6 {
        font-size: 12px !important
    }

    .fs-4 {
        font-size: 12px !important
    }

    .dropdown-lang {
        color: #000;
        font-size: 12px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .drawer-menu .menu-header a.logo img {
        max-width: 135px
    }

    .dropdown {
        margin-left: 1rem
    }
}

@media only screen and (max-width:320px) {
    .dropdown-lang {
        color: #000;
        font-size: 12px;
        font-family: "Nunito Sans", sans-serif;
        text-decoration: none
    }

    .drawer-menu .menu-header a.logo img {
        max-width: 110px
    }

    .dropdown {
        margin-left: 0rem
    }
}

.hero-text {
    position: relative;
    top: 200px;
    padding-left: 50px
}

.title-about {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    text-transform: uppercase;
    color: #fcfcfc
}

.subtitle-about {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #fff
}

h2 {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 30px;
    color: #021C7A
}

p {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #424242
}

/* Events */
section#events p,
ol li,
ul li {
    line-height: 25px;
}

span {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242
}

.card {
    background-color: #fff;
    box-shadow: 5px 5px 10px rgb(0 0 0 / .2);
    min-height: 100%
}

ul.pagination {
    gap: 10px
}

ul.pagination .page-link {
    border-radius: 5px !important;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
    color: #185BC3;
    border: .692857px solid #185BC3
}

ul.pagination .page-link:hover {
    background: #185BC3 !important;
    color: #FFF
}

ul.pagination .page-link:focus {
    background: #185BC3 !important;
    color: #FFF
}

ul.pagination .page-text {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #BCBCBC
}

ul.pagination .page-item:last-child .page-link {
    border: 1px solid #BCBCBC
}

ul.pagination .page-item:first-child .page-link {
    border: 1px solid #BCBCBC
}

.swiper {
    width: 100%;
    height: 100%
}

.swiper-slide {
    width: auto;
    height: 100%
}

.sort-text {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #71717A
}

.navbar .collapse .btn-nav {
    background: transparent;
    width: auto;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%;
    color: #424242
}

.navbar .collapse .btn-nav:hover {
    background: #1C80C3;
    border-radius: 100px;
    color: #FFF;
    width: auto
}

.navbar .btn-col {
    padding: 35px
}

.btn-nav {
    background: transparent;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%
}

.btn-nav:hover {
    background: #1C80C3;
    border-radius: 100px;
    color: #FFF;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%
}

.btn-nav-active {
    background: #1C80C3;
    border-radius: 100px;
    color: #FFF;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%
}

.swiper {
    width: 100%;
    height: 100%
}

.swiper-slide {
    width: auto;
    height: 100%
}

.lengkap {
    font-family: "Nunito Sans", sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    color: #eb3b33
}

.list-address {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: repeat(3, 1fr)
}

input#hubungi_kami {
    width: auto;
    border-radius: 5px;
    border: 1px solid #ada9a9;
    padding: 1% 9%;
    margin: 1% 1%;
    background-image: url(../../assets/img/search-icon-2.png);
    background-color: #E9EDF1;
    background-size: contain;
    background-repeat: no-repeat;
    outline: 0;
    background-position: 12px;
    background-size: 20px;
    padding-left: 40px
}

.form-select#select-hubungi-kami {
    background: #1C80C3 !important;
    border-radius: 5px !important;
    width: auto;
    background-image: url(../../assets/img/arrow-down.png) !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    line-height: 180%;
    color: #FFF
}

select#inputState {
    border: transparent;
    background-color: transparent;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #71717A
}

#hubungi_kami .hero-area {
    background: url(../../assets/img/banner-hubungi-kami.png);
    width: 1440px;
    height: 420px;
    background-repeat: no-repeat;
    background-size: contain
}

.loader {
    display: none;
    width: 5em;
    height: 5em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    border: .6em dotted currentcolor;
    border-radius: 50%;
    animation: 1s loader-01 linear infinite
}

#rekening-id .hero-area {
    background: url(../../assets/img/banner-pembukaan.png);
    width: 1440px;
    height: 420px;
    background-repeat: no-repeat;
    background-size: auto
}

.ket-rekening {
    display: flex;
    flex-direction: column
}

.list-karir {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.list-karir .card-box {
    background: #fff;
    box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
    border-radius: 10px
}

.list-laporan {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.list-laporan .card-box {
    background: #FFF;
    width: 260px;
    box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
    border-radius: 10px
}

#tata-kelola .hero-area {
    background: url(../../assets/img/img_tata_kelola_1.png);
    width: 1440px;
    height: 420px;
    background-repeat: no-repeat;
    background-size: auto
}

#tata-kelola

/*.accordion-button:after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url(../../assets//img/arrow-up.svg);background-repeat:no-repeat;background-color:#1c80c3;padding:5px;background-size:1.25rem;transition:transform 0.2s ease-in-out}#tata-kelola /*.accordion-button:not(.collapsed)::after{background-image:url(../../assets//img/arrow-up.svg);transform:rotate(-180deg)}*/
#tata-kelola .fa-chevron-right {
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #eb3b33
}

*/.card-kelola {
    min-height: 222px
}

.card-kelola .row-karir {
    margin-top: 30px
}

.card-komite {
    background-color: transparent
}

.vektor-rekening-1 {
    position: relative;
    left: 100px;
    top: 1430px;
    width: 568.5px;
    height: 102px;
    z-index: -1
}

.vektor-rekening-2 {
    position: relative;
    top: 1563px;
    width: 569px;
    height: 179.5px;
    left: 245px;
    z-index: -1
}

.vektor-rekening-3 {
    position: relative;
    top: 1659px;
    width: 569px;
    height: 179.5px;
    left: 270px;
    z-index: -1
}

.vektor-rekening-4 {
    position: relative;
    top: 1754px;
    width: 569px;
    height: 179.5px;
    left: 250px;
    z-index: -1
}

.vektor-rekening-5 {
    position: relative;
    top: 1810px;
    width: 569px;
    height: 179.5px;
    left: 280px;
    z-index: -1
}

.row-offline {
    padding-top: 50px;
    display: flex;
    flex-direction: row
}

.text-rekening {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    color: #000
}

#publikasi .swiper {
    width: 100%;
    height: 663px
}

#publiksi .swiper-slide {
    font-size: 18px;
    display: cover
}

#publikasi .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#publikasi .card {
    background-color: #FFF;
    box-shadow: 0 8px 20px rgba(18, 17, 39, .1)
}

.list-publikasi {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.list-publikasi .card-publikasi {
    padding-bottom: 20px
}

#publikasi .title {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 30px;
    color: #333
}

#publikasi .subtitle {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 30px;
    color: #000
}

#publikasi input.form-control {
    background: #FFF;
    height: 80px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 0
}

#publikasi textarea.form-control {
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 0
}

.btn-kirim {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #FFF;
    width: 114px;
    height: 55px;
    background: #1C80C3;
    border-radius: 5px
}

.card-faq {
    box-shadow: 0 10px 24px 1px rgba(0, 0, 0, .1) !important;
    border-radius: 0px !important;
    background-color: #FAFBFF !important
}

#faq .accordion-button:not(.collapsed) {
    border-color: transparent;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .15);
    background-color: #FAFBFF
}

#faq .accordion-button:not(.collapsed) .dot {
    height: 24px;
    width: 24px;
    background-color: #1C80C3;
    border-radius: 50%;
    display: inline-block
}

#faq .accordion-button.collapsed {
    border-color: transparent;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .15);
    background-color: #FAFBFF
}

#faq .accordion-button.collapsed .dot {
    height: 24px;
    width: 24px;
    background-color: rgba(28, 128, 195, .48);
    border-radius: 50%;
    display: inline-block
}

#faq .list-group {
    border-radius: 0%
}

#faq .list-group .fa-chevron-right {
    color: #1C80C3 !important;
    opacity: 50%
}

#faq .list-group .dot {
    height: 24px;
    width: 24px;
    background-color: rgba(28, 128, 195, .48);
    border-radius: 50%;
    display: inline-block
}

#faq .list-group .active {
    background: #FAFBFF;
    color: #000
}

#faq .list-group .active .fa-chevron-right {
    opacity: 100%
}

#faq .list-group .active .dot {
    height: 24px;
    width: 24px;
    background-color: #1C80C3;
    border-radius: 50%;
    display: inline-block
}

#faq .list-group-item.active {
    border-color: transparent;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .15);
    background-color: #FAFBFF
}

#faq .list-group-item-action:hover .fa-chevron-right {
    color: purple !important
}

#faq .list-group-item-action:hover .dot {
    background-color: purple
}

.date-acara {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #aaa
}

.btn-acara {
    background: #1c80c3;
    border-radius: 5px;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%;
    width: auto;
    color: #fff
}

.title-subacara {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    color: #000
}

.subtitle-subacara {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: .363758px;
    color: #000
}

.via-zoom {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 11.0986px;
    line-height: 13px;
    color: #000
}

.text-date {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #000
}

.btn-acara {
    width: auto;
    color: #fff;
    background: #1c80c3;
    border-radius: 5px
}

.btn-acara2 {
    border-color: #1c80c3;
    border-radius: 5px;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 35px !important;
    text-align: center;
    color: #1c80c3 !important
}

.btn-acara2:hover {
    background: #1c80c3;
    border-radius: 5px;
    color: #ffffff !important
}

.btn-acara2:active {
    background: #1c80c3;
    border-radius: 5px;
    color: #ffffff !important
}

.text-lengkap {
    color: #16669c
}

#acara .title .nav-link {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 180%;
    color: #424242
}

#acara h2 {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 35px;
    color: #021c7a
}

.h-fit {
    height: fit-content !important
}

.w-260px {
    width: 260px
}

@media only screen and (max-width:600px) {
    .w-260px {
        width: 100%
    }

    .w-260px img {
        object-fit: cover
    }
}

.bg-gray {
    background-color: rgb(220, 220, 220)
}

.table-saham table>:not(:first-child) {
    border-top: 0
}

.table-saham .table-bordered>thead>tr>td {
    border-right: 0;
    border-left: 0
}

.table-dividen table>:not(:first-child) {
    border-top: 0
}

.table-dividen .table-bordered>thead>tr>th {
    border-right: 0;
    border-left: 0
}

.securitas-detail {
    width: 1068px;
    height: 1546px
}

.list-keuangan {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.list-keuangan .card-box {
    background: #FFF;
    box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
    border-radius: 10px;
    height: 100%
}

.list-keuangan .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.download {
    font-family: "Nunito Sans", sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    line-height: 30px;
    color: #EB3B33
}

select.form-select#selectePenerbitan {
    width: auto
}

.list-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.card-info {
    padding-bottom: 20px
}

.keterangan {
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    width: 332px;
    border: 1px solid #BCBCBC
}

.btn-saham {
    width: auto;
    border: 1px solid #BFBFBF;
    border-radius: 80px;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 36px;
    color: #606368
}

.ket {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 36px;
    color: #606368
}

.sub-ket {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 36px
}

#tab-dividen.nav-tabs {
    border-bottom: none
}

#tab-dividen.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #1C80C3;
    background-color: transparent
}

#tab-dividen.nav-tabs .nav-link {
    border: none
}

#tab-dividen .nav-link {
    color: #444
}

#chartdiv {
    width: 100%;
    height: 500px
}

.reverse img {
    width: 546px
}

.riset img {
    width: 433px;
    height: 468px
}

.post img {
    width: 617px;
    height: 471px
}

.post2 img {
    width: 549px;
    height: 405px
}

.post3 img {
    width: 418px
}

.table-coperate table>:not(:first-child) {
    border-top: 0
}

.table-coperate .table-bordered>thead>tr>th {
    border-right: 0;
    border-left: 0
}

#produk-layanan-id ul li {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242
}

#produk-layanan-id ol li {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242
}

.text-pro {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 36px;
    color: #000
}

.post {
    list-style-type: none;
    padding: 0
}

.post li {
    padding: 0 0 0 16px;
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242
}

.post li:before {
    position: absolute;
    left: -2px;
    content: "✓";
    color: #1C80C3
}

.text-trading {
    text-align: justify
}

.btn-download {
    width: auto;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #FFF;
    background: #1C80C3;
    border-radius: 5px
}

.card-trading {
    height: 430px
}

.ilustrasi {
    padding-left: 80px;
    padding-right: 80px
}

.ilustrasi .ilustrasi-text {
    padding-top: 50px
}

#about-us-id .card {
    background-color: #1C80C3
}

.history-title {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 72px;
    line-height: 98px;
    color: #424242
}

.history-subtitle {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 36px;
    line-height: 49px;
    color: #000
}

.history-content {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #000
}

.filosofi {
    background-color: #1C80C3;
    color: #fff !important
}

.filosofi h2,
.filosofi p {
    color: #fff !important
}

.filosofi .card p {
    background-color: #1C80C3;
    color: #fff !important
}

#about-us-id li {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242
}

.alamat h2 {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 49px;
    color: #021C7A
}

.alamat span {
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #FFF
}

.integritas {
    width: 85px;
    height: 63px
}

.budaya {
    width: 63px;
    height: 63px
}

.izin {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: justify;
    color: #424242
}

.card-manajemen {
    background-color: transparent;
    border-color: transparent
}

.img-struktur-perusahaan {
    width: 100%
}

.img-struktur-kepemilikan {
    width: 100%
}

.img-manajemen {
    width: 272px;
    height: 305px
}

.section-value {
    padding-left: 80px;
    padding-right: 80px
}

.list-alamat {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.list-alamat .card-box {
    background: #076FC2;
    color: #FFF;
    box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
    border-radius: 10px;
    min-height: 233px
}

.list-alamat span {
    color: #FFF
}

#about-us-id .form-select {
    background: #1C80C3 !important;
    border-radius: 5px !important;
    color: #FFF;
    background-image: url(../../assets/img/arrow-down.png) !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important
}

.title-struktur {
    position: absolute;
    bottom: 930px
}

.title-struktur2 {
    position: absolute;
    bottom: 2320px
}

.nama-manajemen {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28.1379px;
    line-height: 35px;
    color: #000
}

.jabatan {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 35px;
    color: #000
}

.jabatan-desk-full {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242
}

.jabatan-desk {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #424242;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%
}

.all-text {
    font-family: "Nunito Sans", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #1C80C3
}

.list-csr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 20px
}

.list-csr .csr-date {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #828282
}

.list-csr .csr-card-title {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #000
}

.list-csr .csr-desk {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #828282
}

.list-csr-laporan {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 20px
}

.laporan-title {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #000
}

.marquee-box {
    position: fixed !important;
    bottom: 0;
    z-index: 9999;
    width: 100%
}

.fs-12px {
    font-size: 12px
}

.marquee-box .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 5px
}

.marquee {
    overflow: hidden;
    display: flex;
    background-color: var(--bs-blue);
    color: var(--bs-white);
    padding: 0;
    z-index: 9999;
    width: 100vw
}

.marquee .content {
    white-space: nowrap;
    margin-right: 10px;
    line-height: 50px
}

.feature-product .swiper-wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.feature-product a {
    text-decoration: none;
    color: inherit;
    transition: 500ms ease-out;
    border-radius: var(--radius-lg);
    padding: 1rem 0 0
}

.feature-product a:hover {
    background: var(--bs-white);
    box-shadow: -10px 10px 20px rgba(10, 52, 86, .05)
}

.swiper-button-next::after {
    display: none
}

.swiper-button-prev::after {
    display: none
}

.btn-produklist {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 10px
}

.swiper-button-prev:hover .btn-arrow {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 10px;
    background-color: #076FC2;
    color: #fff
}

.btn-produklist:focus {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 10px;
    color: #fff;
    background-color: #076FC2
}

.swiper-button-next #active {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 10px;
    background-color: #076FC2;
    color: #fff
}

.btn-arrow {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 10px;
    position: absolute;
    top: 178px
}

.btn-arrow:hover {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 10px;
    background-color: #1F92C9;
    color: #fff
}

#hero-swiper .swiper-button-prev {
    left: 10%
}

.feature-product .swiper-button-prev {
    left: 0%
}

.feature-product .swiper-button-next {
    right: 0%
}

.swiper-button-prev .btn-arrow {
    background-color: #fff;
    color: #000;
    left: 10%
}

#hero-swiper .swiper-button-next {
    position: absolute;
    right: 10%
}

.swiper-button-next .btn-arrow {
    position: absolute;
    right: 200px;
    top: 178px;
    background-color: #1F92C9;
    color: whitesmoke
}

.counter2 {
    position: absolute;
    left: 25%;
    bottom: 18%;
    z-index: 1
}

.counter strong {
    position: absolute;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: #4F4F4F;
    z-index: 100
}

.border-banner {
    position: absolute;
    height: 2px;
    width: 60px;
    border: 1px solid #424242;
    bottom: 1px;
    left: 25px;
    z-index: 100
}

#product-service-carousel {
    width: auto
}

#product-service-prev .swiper-button-prev {
    left: 0
}

#product-service-prev .btn-produklist {
    background-color: #fff;
    color: red
}

.w-modal {
    max-width: 517px;
    max-height: 517px
}

.title-modal-custom {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    text-transform: uppercase;
    color: #FFF
}

.list-modal-custom {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 41px;
    color: #FFF
}

.p-custom {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem
}

.width-acara-container {
    width: 50%
}

.width-article {
    width: 50%
}

.width-main-acara {
    width: 50%
}

@keyframes loader-01 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@media (min-width:1400px) {
    /*.swiper-button-prev{left:0%}.feature-product .swiper-button-prev{left:-1%}*/
}

@media (max-width:992px) {
    h2 {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 30px !important;
        line-height: 30px;
        color: #021c7a
    }

    p {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: #424242
    }

    .list-address {
        grid-template-columns: repeat(2, 1fr)
    }

    .list-laporan {
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    .list-publikasi {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .list-publikasi .card-publikasi {
        padding-bottom: 20px
    }

    #acara .col-6 {
        width: 768px
    }

    #acara .title .col-9 {
        width: 400px
    }

    #acara .title .col-3 {
        width: auto
    }

    .keterangan {
        width: 100%
    }

    .list-laporan {
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    .list-laporan .card-box {
        background: #FFF;
        width: 260px;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px
    }

    .card-produk .card-text {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px
    }

    .ilustrasi {
        padding: 0
    }

    .ilustrasi .ilustrasi-text {
        padding-top: 0
    }

    #produk-layanan-id ol li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: #424242
    }

    #produk-layanan-id ul {
        padding-left: 0
    }

    #produk-layanan-id ul li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: #424242
    }

    .img-stock {
        width: 90%;
        height: 90%
    }

    .img-post1 {
        width: 80%
    }

    .img-post2 {
        width: 80%;
        height: 80%
    }

    .alamat .col-6 {
        width: 500px
    }

    .list-csr {
        grid-template-columns: repeat(2, 1fr)
    }

    .alamat h2 {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 30px !important;
        line-height: 40px;
        color: #021C7A
    }

    .card-manajemen .col-md-3 {
        width: 600px
    }

    .list-alamat {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .list-alamat .card-box {
        background: #076FC2;
        color: #FFF;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px;
        min-height: 233px
    }

    .list-alamat span {
        color: #FFF
    }

    #about-us-id .hero-caption {
        display: none !important
    }

    .caption-title {
        position: relative;
        bottom: 100px;
        left: 100px
    }

    .caption {
        z-index: 100
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none
    }

    #about-us-id .section-main {
        padding: 0
    }

    #about-us-id .section-main .swiper {
        height: 450px !important
    }

    #about-us-id .section-main .swiper .hero-banner {
        padding-top: 350px;
        height: 50px !important
    }

    #about-us-id .section-main .swiper .hero-banner .hero-picture {
        min-height: 400px !important
    }

    #about-us-id .section-main .swiper .hero-banner .hero-picture img {
        height: 400px !important
    }

    .img-struktur-perusahaan {
        width: 100%;
        height: 80%
    }

    .img-struktur-kepemilikan {
        width: 100%;
        height: 80%
    }
}

/* @media (max-width:3840px) {
    .form-search-wrap .form-search {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        left: 0;
        right: 0;
        top: 100%;
        top: calc(100% + 1rem);
        background-color: var(--bs-white);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-shadow: 0 1rem 4rem -.5rem #0001;
        border-radius: 5rem;
        transform: translateY(100%);
        transition: 300ms ease
    }
} */

@media (max-width:1199px) {
    #acara .title .col-9 {
        width: 600px
    }

    #acara .title .col-3 {
        width: auto
    }

    .keterangan {
        width: 100%
    }

    .alamat .col-6 {
        width: 700px
    }

    .card-manajemen .col-md-3 {
        width: 300px
    }

    /* .form-search-wrap .form-search {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        left: -310px;
        right: 0;
        top: 100%;
        top: calc(100% + 1rem);
        background-color: var(--bs-white);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-shadow: 0 1rem 4rem -.5rem #0001;
        border-radius: 5rem;
        transform: translateY(100%);
        transition: 300ms ease;
        width: 400px
    } */

    /* .form-search-wrap .form-search .form-control {
        border: 0;
        background-color: transparent;
        border-radius: 5rem !important;
        padding: 0 1rem;
        height: 3rem;
        width: 100% !important
    } */
}

@media (max-width:768px) {
    /* .form-search-wrap {
        display: flex;
        align-items: center
    } */

    h2 {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 20px !important;
        line-height: 30px;
        color: #021c7a
    }

    p {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    .p-custom {
        padding-right: 106px;
        padding-left: 106px;
        padding-top: 61px;
        padding-bottom: 61px
    }

    .list-address {
        display: grid;
        margin-bottom: 20px;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-laporan {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .list-karir {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .list-karir .card-box {
        background: #fff;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px
    }

    .list-publikasi {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .list-publikasi .card-publikasi {
        padding-bottom: 20px
    }

    #acara .col-6 {
        width: 768px
    }

    #acara .title .col-9 {
        width: 250px
    }

    #acara .title .col-3 {
        width: auto
    }

    .list-keuangan {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .list-keuangan .card-box {
        background: #FFF;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px
    }

    .list-info {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .securitas-detail {
        height: 800px
    }

    .card-produk .card-text {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px
    }

    #produk-layanan-id ol li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    #produk-layanan-id ul {
        padding-left: 0
    }

    #produk-layanan-id ul li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    .img-post1 {
        height: 50%
    }

    .img-post2 {
        width: 80%;
        height: 80%
    }

    .alamat .col-6 {
        width: 400px
    }

    .alamat h2 {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 20px !important;
        line-height: 30px;
        color: #021C7A
    }

    .section-value {
        padding: 0
    }

    .list-alamat {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-alamat .card-box {
        background: #076FC2;
        color: #FFF;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px;
        min-height: 233px
    }

    .list-alamat span {
        color: #FFF
    }

    .caption-title {
        position: relative;
        bottom: 160px;
        left: 100px
    }

    #about-us-id .section-main {
        padding: 0
    }

    #about-us-id .section-main .swiper {
        height: 450px !important
    }

    #about-us-id .section-main .swiper .hero-banner {
        padding-top: 350px;
        height: 50px !important
    }

    #about-us-id .section-main .swiper .hero-banner .hero-picture {
        min-height: 300px !important
    }

    #about-us-id .section-main .swiper .hero-banner .hero-picture img {
        height: 300px !important
    }
}

@media (max-width:531px) {
    /* .form-search-wrap {
        display: flex;
        align-items: center;
        min-width: 200px
    } */
}

@media (max-width:576px) {
    /* .form-search-wrap {
        display: flex;
        align-items: center;
        min-width: 90px
    } */

    /* .form-search-wrap .form-search {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        left: -150px;
        top: 100%;
        top: calc(100% + 1rem);
        background-color: var(--bs-white);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-shadow: 0 1rem 4rem -.5rem #0001;
        border-radius: 5rem;
        transform: translateY(100%);
        transition: 300ms ease;
        width: 300px
    } */

    /* .form-search-wrap .form-search .form-control {
        border: 0;
        background-color: transparent;
        border-radius: 5rem !important;
        padding: 0 1rem;
        height: 3rem
    } */

    h2 {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 20px !important;
        line-height: 30px;
        color: #021c7a
    }

    p {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    .list-laporan {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-karir {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-karir .card-box {
        background: #fff;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px
    }

    .list-publikasi {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-publikasi .card-publikasi {
        padding-bottom: 20px
    }

    #acara .col-6 {
        width: 576px
    }

    #acara .title .col-9 {
        width: 500px
    }

    #acara .title .col-3 {
        width: 500px
    }

    .agenda .col-9 {
        width: 576px
    }

    .agenda .col-sm-3 {
        margin-top: 20px;
        width: 500px
    }

    .list-keuangan {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-keuangan .card-box {
        background: #FFF;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px
    }

    .list-info {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .securitas-detail {
        height: 600px
    }

    .card-produk .card-text {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px
    }

    .col-6.col-md-5.mb-2.edukasi {
        width: 500px
    }

    .col-6.mb-2.edukasi {
        width: 500px
    }

    .img-browser {
        margin-left: 30px
    }

    #produk-layanan-id .section-main .col-6 {
        width: 500px
    }

    #produk-layanan-id ol li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    #produk-layanan-id ul {
        padding-left: 0
    }

    #produk-layanan-id ul li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    .img-post1 {
        height: 50%
    }

    .img-post2 {
        width: 80%;
        height: 80%
    }

    .post {
        list-style-type: none;
        padding: 0
    }

    .post li {
        padding: 0 0 0 15px;
        position: relative;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }

    .post li:before {
        position: absolute;
        left: 0;
        content: "✓";
        color: #1C80C3
    }

    .text-pro {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #000
    }

    .button-apps {
        width: 90%;
        height: 90%
    }

    .list-csr {
        grid-template-columns: repeat(1, 1fr)
    }

    .list-csr-laporan {
        grid-template-columns: repeat(1, 1fr)
    }

    .alamat .col-6 {
        max-width: 300px
    }

    .alamat h2 {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 20px !important;
        line-height: 30px;
        color: #021C7A
    }

    .caption-title {
        position: relative;
        bottom: 130px;
        left: 30px
    }

    #about-us-id .section-main {
        padding: 0
    }

    #about-us-id .section-main .swiper {
        height: 450px !important
    }

    #about-us-id .section-main .swiper .hero-banner {
        padding-top: 350px;
        height: 50px !important
    }

    #about-us-id .section-main .swiper .hero-banner .hero-picture {
        min-height: 300px !important
    }

    #about-us-id .section-main .swiper .hero-banner .hero-picture img {
        height: 300px !important
    }

    #about-us-id .section-value {
        padding: 0
    }

    #about-us-id .section-value .col-6 {
        margin-top: 30px;
        width: 500px
    }

    .list-alamat {
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }

    .list-alamat .card-box {
        background: #076FC2;
        color: #FFF;
        box-shadow: 0 8px 20px rgba(18, 17, 39, .1);
        border-radius: 10px;
        min-height: 233px
    }

    .list-alamat span {
        color: #FFF
    }

    .btn-cta {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        padding: 0;
        min-width: 200px
    }

    .w-modal {
        max-width: 300px
    }

    .milstone-history {
        padding-top: 5px
    }

    .form-search-wrap {
        display: flex;
        align-items: center
    }
}

@media (max-width:495px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .vektor-rekening-1 {
        visibility: hidden
    }

    .vektor-rekening-2 {
        visibility: hidden
    }

    .vektor-rekening-3 {
        visibility: hidden
    }

    .vektor-rekening-4 {
        visibility: hidden
    }

    .vektor-rekening-5 {
        visibility: hidden
    }
}

@media (max-width:991px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .navbar .collapse .btn-nav {
        background: transparent
    }

    .navbar .collapse .btn-nav:hover {
        background: #1C80C3;
        border-radius: 100px;
        color: #FFF
    }

    .navbar .btn-col {
        padding: 10px
    }

    #produk-layanan-id .col-5 {
        width: 990px
    }

    .width-main-acara {
        width: 100%
    }
}

@media (min-width:496px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .vektor-rekening-1 {
        left: -9px;
        top: 1261px;
        transform: rotate(43deg)
    }

    .vektor-rekening-2 {
        top: 1367px;
        left: -342px;
        transform: rotate(137deg)
    }

    .vektor-rekening-3 {
        top: 1677px;
        left: -12% !important;
        transform: rotate(57deg)
    }

    .vektor-rekening-4 {
        top: 1543px;
        left: 5% !important;
        transform: rotate(-49deg)
    }

    .vektor-rekening-5 {
        top: 1605px;
        left: -50% !important;
        transform: rotate(207deg)
    }
}

@media (min-width:650px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .vektor-rekening-1 {
        left: 63px;
        top: 1084px;
        transform: rotate(15deg)
    }

    .vektor-rekening-2 {
        top: 1126px;
        left: 85px;
        transform: rotate(-18deg)
    }

    .vektor-rekening-3 {
        top: 1344px;
        left: 10% !important;
        transform: rotate(20deg)
    }

    .vektor-rekening-4 {
        top: 1375px;
        left: 16% !important;
        transform: rotate(-17deg)
    }

    .vektor-rekening-5 {
        top: 1378px;
        left: -38% !important;
        transform: rotate(191deg)
    }
}

@media (min-width:766px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .vektor-rekening-1 {
        left: 100px;
        top: 1253px;
        transform: rotate(15deg)
    }

    .vektor-rekening-2 {
        top: 1452px;
        left: 116px;
        transform: rotate(-10deg)
    }

    .vektor-rekening-3 {
        top: 1659px;
        left: 10% !important;
        transform: rotate(20deg)
    }

    .vektor-rekening-4 {
        top: 1787px;
        left: 16% !important;
        transform: rotate(-17deg)
    }

    .vektor-rekening-5 {
        top: 1919px;
        left: 4% !important;
        transform: rotate(191deg)
    }
}

@media (min-width:1030px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .vektor-rekening-1 {
        top: 1355px;
        left: 50%;
        transform: translateX(-81%)
    }

    .vektor-rekening-2 {
        top: 1497px;
        left: 50% !important;
        transform: translateX(-77%)
    }

    .vektor-rekening-3 {
        top: 1659px;
        left: 50% !important;
        transform: translateX(-77%)
    }

    .vektor-rekening-4 {
        top: 1770px;
        left: 50% !important;
        transform: translateX(-74%)
    }

    .vektor-rekening-5 {
        top: 1808px;
        left: 50% !important;
        transform: translateX(-82%)
    }
}

@media (min-width:1240px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .vektor-rekening-1 {
        top: 1430px;
        left: 50%;
        transform: translateX(-91%)
    }

    .vektor-rekening-2 {
        top: 1578px;
        left: 50% !important;
        transform: translateX(-89%)
    }

    .vektor-rekening-3 {
        top: 1659px;
        left: 50% !important;
        transform: translateX(-88%)
    }

    .vektor-rekening-4 {
        left: 50% !important;
        transform: translateX(-84%)
    }

    .vektor-rekening-5 {
        left: 50% !important;
        transform: translateX(-87%)
    }

    .vr-4 {
        top: 1626px;
        left: 50% !important;
        transform: translateX(-87%)
    }
}

@media (min-width:320px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .orn {
        width: 192px;
        height: 67px
    }
}

@media (min-width:766px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .orn {
        width: 460px;
        height: 110px
    }
}

@media (min-width:1030px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .orn {
        width: 630px
    }
}

@media (min-width:1240px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .orn {
        width: 660px
    }
}

@media only screen and (max-width:600px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .reverse img {
        object-fit: cover;
        width: 100%
    }

    .riset img {
        width: 300px;
        height: 330px
    }

    .post img {
        width: 100%
    }

    .post2 img {
        width: 100%
    }

    .post3 img {
        width: 100%
    }
}

@media (max-width:1199px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .img-post1 {
        width: 70%
    }

    .img-post2 {
        width: 80%;
        height: 80%
    }

    .img-stock {
        width: 95%;
        height: 95%
    }

    .btn-acara-hm {
        padding-top: 10px;
        padding-left: 13px;
        width: 140px;
        background-color: #3e93cc
    }
}

@media (min-width:993px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .history-title2,
    .history-subtitle2,
    .history-content2,
    .swiper-pagination {
        display: none
    }
}

@media(max-width:575px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .width-article {
        width: 100%
    }

    .row-offline {
        padding-top: 50px;
        display: flex;
        flex-direction: column
    }
}

@media (min-width:480px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    #hero-swiper .swiper-button-prev {
        left: 2.5%;
        display: block
    }

    .feature-product .swiper-button-prev {
        left: 0%;
        display: block
    }

    #hero-swiper .swiper-button-next {
        right: 80%;
        display: block
    }

    .feature-product .swiper-button-next {
        right: 0%;
        display: block
    }

    .swiper-button-next .btn-arrow {
        right: 10%
    }
}

@media (min-width:320px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .btn-cta {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        padding: 0;
        min-width: 200px
    }
}

@media (max-width:480px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .counter2 {
        position: absolute;
        bottom: 60px;
        left: 47%;
        transform: translateX(-50%)
    }

    .btn-arrow {
        top: 226px
    }

    .swiper-button-next .btn-arrow {
        top: 226px;
        right: 0
    }

    .title-product-hm {
        font-size: 12px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .btn-acara-hm {
        padding-top: 6px;
        padding-left: 13px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }
}

@media (max-width:767px) {
    .form-search-wrap {
        display: flex;
        align-items: center
    }

    .btn-cta {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        padding: 0;
        min-width: 200px
    }

    #myModal #handphone {
        width: 200px
    }

    .w-modal {
        max-width: 500px
    }

    .counter2 strong {
        color: whitesmoke
    }

    .counter2 hr {
        color: whitesmoke;
        opacity: 1
    }

    .btn-arrow {
        color: whitesmoke
    }

    .title-product-hm {
        font-size: 12px;
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        font-style: normal
    }

    .btn-acara-hm {
        padding-top: 6px;
        padding-left: 13px;
        width: 140px;
        background-color: #3e93cc;
        border-radius: 5px
    }
}

ol,
ul {
    font-size: 16px;
    color: #424242
}

.milstone-history {
    padding-top: 0
}

.offcanvas-header {
    background-color: #ffffff
}

.offcanvas-body {
    background-color: #fff9f9
}

.socmed-menu {
    display: inline-flex;
    font-size: 30px
}

.popup-banner {
    color: #fff
}

.btn-close {
    opacity: 1
}

.form-control {
    border-radius: 4px
}

.table.table-striped {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #424242;
    border-radius: 4px
}

.accordion-item {
    box-shadow: 0 3px 10px rgb(0 0 0 / .2)
}

.breadcrumb .breadcrumb-item:last-child {
    font-weight: 700
}

.bg-primary {
    box-shadow: 0 3px 10px rgb(0 0 0 / .2);
    border-radius: 5px
}

.card-date-libary {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #424242
}

.table-responsive {
    border-radius: 10px
}

.img-fluid-acara {
    max-width: 100%;
    height: auto
}

.img-fluid-4 {
    max-width: 100%;
    height: auto;
    margin-left: 10px
}

.btn-primary-sub-demo {
    color: #fff;
    background-color: red;
    border-color: red;
    max-width: 45%;
    font-size: 9px
}

.btn-primary-sub {
    color: #fff;
    background-color: #1C80C3;
    border-color: #1C80C3;
    max-width: 55%;
    font-size: 9px
}

.button-sub {
    margin-bottom: 25px;
    margin-top: 15px
}

/*.accordion-button:after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url(../../assets//img/arrow-up.svg);background-repeat:no-repeat;background-color:#1c80c3;padding:5px;background-size:1.25rem;transition:transform 0.2s ease-in-out}.accordion-button:not(.collapsed)::after{background-image:url(../../assets//img/arrow-up.svg);transform:rotate(-180deg)}*/
.breadcrumb-item {
    font-size: 14px
}

.card-hm {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0);
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / .2)
}

@media (max-width:576px) {

    p,
    li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }
}

@media (max-width:768px) {

    p,
    li {
        font-family: "Nunito Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #424242
    }
}

.agenda-note {
    padding-right: 0
}

@media (max-width:480px) {
    .agenda-note {
        padding-right: 10px;
        height: auto;
        padding-bottom: 10px;
    }

    .img-fluid-rek {
        max-width: 100%;
        max-height: 100%
    }
}

.img-fluid-rek {
    max-width: 100%;
    height: auto
}

@media screen and (max-width:992px) {
    .img-banner .hero-picture {
        min-height: 500px
    }
}

@media screen and (max-width:768px) {
    .img-banner .hero-picture {
        min-height: 500px
    }
}

@media screen and (max-width:576px) {
    .img-banner .hero-picture {
        min-height: 300px
    }
}

.product-swiper {
    padding-right: 0
}

.banner-swiper {
    padding-right: 0
}


/* Responsive typography */
* {
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    font-family: "Nunito Sans", sans-serif !important;
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.img-fluid-acara,
.img-fluid-2 {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    padding: 5px;
    border-radius: 10px !important;
}

.form-select {
    font-weight: 700 !important;
    user-select: none;
    -webkit-user-select: auto;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    border-radius: 8px;
    border: 0;
}

.img-manajemen {
    width: 100%;
    height: 305px;
    margin-top: 20px;
    border-radius: 8px;
}

.jabatan {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #555 !important;
    line-height: normal !important;
    margin-bottom: 16px;
    text-transform: capitalize !important;
}

.jabatan-desk-full {
    min-height: auto !important;
}

.jabatan-desk-full p {
    font-size: 15px;
    line-height: 25px;
}

.all-text {
    font-size: 14px !important;
    margin-left: 10px;
}

.accordion-button:not(.collapsed) {
    text-transform: capitalize !important;
}

.accordion-button {
    text-transform: capitalize !important;
}

@media (min-width: 375px) and (max-width: 575px) {
    .banner-swiper *>.hero-banner .hero-picture img {
        /* height: 300px!important; */
        object-fit: contain !important;
        object-position: top center !important;
        /* margin-top: 46px!important; */
    }

    .banner-swiper *>.hero-banner {
        min-height: fit-content !important;
    }

    p {
        font-size: 14px !important;
    }

    .accordion-button:not(.collapsed) {
        font-size: 18px !important;
    }

    .accordion-button {
        font-size: 18px !important;
    }
}

/* Small devices (landscape phones, 325px and up) */
@media (min-width: 325px) {

    html,
    body {
        font-family: "Nunito Sans", sans-serif;
        font-size: 14px !important;
    }

    .nama-manajemen {
        text-align: center;
    }

    .jabatan {
        font-size: 14px !important;
        text-align: center;
    }

    .img-manajemen {
        width: 100%;
        height: fit-content;
        margin-top: 10px;
        border-radius: 8px;
    }

    p,
    li,
    ol,
    ul {
        font-size: 15px !important;
    }

    ol,
    ul {
        padding-left: 35px !important;
    }

    ol.breadcrumb {
        padding-left: 0 !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    html,
    body,
    p {
        font-family: "Nunito Sans", sans-serif;
        font-size: 14px;
    }

    .img-manajemen {
        width: 238px !important;
        height: fit-content !important;
        margin-top: 15px !important;
        border-radius: 8px;
    }

    .nama-manajemen {
        text-align: left;
    }

    .jabatan {
        text-align: left;
    }

    .jabatan-desk-full {
        min-height: 157px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    html,
    body {
        font-family: "Nunito Sans", sans-serif;
        font-size: 16px;
    }

    .img-manajemen {
        width: 151px !important;
        height: fit-content !important;
        border-radius: 8px;
        margin: 16px 0 16px 5px;
    }

    .all-text {
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .img-manajemen {
        width: 100% !important;
        max-width: 241px;
    }

    nav.breadcrumb-non-sub {
        padding-top: 0;
    }
}

.popup-banner li {
    color: #ffffff;
}

.card,
.accordion-item {
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%) !important;
    border-radius: 8px !important;
    border: 0;
}

.breadcrumb-item {
    color: #555555;
    text-transform: capitalize !important;
}

/* navbar sub menu */
nav.navbar *>.swiper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

nav.navbar *>.swiper-button-prev.swiper-button-disabled,
nav.navbar *>.swiper-button-next.swiper-button-disabled {
    opacity: 0;
}

nav.navbar *>.swiper-button-prev,
nav.navbar *>.swiper-button-next {
    opacity: 1;
    transition: opacity .125s cubic-bezier(0.4, 0, 1, 1) .5s, visibility .125s cubic-bezier(0.4, 0, 1, 1) .5s;
}

nav.navbar *>.swiper-button-prev .btn-arrow {
    left: -52px;
    top: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}

nav.navbar *>.swiper-button-next .btn-arrow {
    right: -52px;
    top: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}

nav.navbar *>.btn-nav {
    border-radius: 20px;
}

nav.navbar *>.btn-nav:hover {
    background: #1c80c3;
    color: #FFFFFF;
    border-radius: 20px;
}

@media (min-width: 768px) {
    nav.navbar *>.swiper {
        margin-top: 10px !important;
    }

    nav.navbar *>.swiper-button-next,
    .swiper-button-prev {
        display: block;
    }

    [data-active-page="publikasi-acara"] *>nav.navbar *>.swiper-button-next,
    [data-active-page="publikasi-acara"] *>nav.navbar *>.swiper-button-prev {
        display: none;
    }

    [data-active-page="publikasi-acara"] #swiper-wrapper {
        gap: 16px;
        margin-right: 30px;
    }

    nav.navbar *>.swiper-button-prev .btn-arrow {
        left: -10px;
    }

    nav.navbar *>.swiper-button-next .btn-arrow {
        right: -10px;
    }

    nav.navbar *>.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-dynamic {
        visibility: hidden;
    }
}

@media (min-width: 1024px) {
    nav.navbar *>.swiper-wrapper {
        height: 55px !important;
    }

    nav.navbar *>.swiper-button-prev .btn-arrow {
        left: -56px;
    }

    nav.navbar *>.swiper-button-next .btn-arrow {
        right: -56px;
    }
}

.banner-swiper *>.hero-banner {
    background-color: #ffffff !important;
}

/* Hero Banner */
@media (min-width: 320px) and (max-width: 424px) {
    .banner-swiper *>.hero-banner {
        --min-height: 400px !important;
        top: 0px !important;
    }

    .banner-swiper *>.hero-banner .img-banner .hero-picture {
        top: -10px !important;
        margin-bottom: -80px !important;
    }

    .banner-swiper *>.hero-banner .img-banner .hero-picture img {
        object-fit: cover !important;
        object-position: center top !important;
        height: auto !important;
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .banner-swiper *>.hero-banner {
        --min-height: 400px !important;
        top: 0px !important;
    }

    .banner-swiper *>.img-banner .hero-picture {
        min-height: 300px;
    }

    .banner-swiper *>.hero-banner .img-banner .hero-picture img {
        object-fit: cover !important;
        object-position: center !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .banner-swiper *>.hero-banner {
        --min-height: 450px !important;
        top: 0px !important;
    }

    .banner-swiper *>.img-banner .hero-picture {
        min-height: 0;
    }

    .banner-swiper *>.hero-banner .img-banner .hero-picture img {
        object-fit: cover !important;
        object-position: center !important;
        height: auto !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .banner-swiper *>.hero-banner {
        --min-height: 500px !important;
        top: 0px !important;
    }

    .banner-swiper *>.hero-banner .img-banner .hero-picture {
        margin-bottom: 0px !important;
    }
}

@media (min-width: 1441px) {
    .banner-swiper *>.hero-banner {
        --min-height: 660px !important;
        top: 0px !important;
        padding-bottom: 10px;
    }

    .banner-swiper *>.hero-banner .hero-picture {
        top: -10px !important;
        margin-bottom: 0px !important;
    }
}

h1.h2 {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    font-variant: normal;
    line-height: 40px !important;
    color: #021c7a;
    /* text-transform: capitalize!important; */
}

h2 {
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 40px !important;
    color: #021c7a;
    /* text-transform: capitalize!important; */
}

.fa-trash {
    font-size: 10px;
    color: #cccccc !important;
}

.fa-trash:hover {
    color: #EB3B33 !important;
}

.header-bannerx {
    height: 400px;
}

.header-img-height {
    height: 400px;
}

.padding-about {
    padding-left: 80px;
    padding-right: 80px;
}

.btn-nav-active {
    background: #1C80C3;
    border-radius: 100px;
    color: #FFFFFF;
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%;
}

.header-img-height {
    position: relative !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
}

.header-bannerx img {
    position: relative !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
}

@media only screen and (max-width: 1024px) {
    .header-bannerx {
        height: 350px;
    }

    .header-img-height {
        height: 350px;
    }
}

@media only screen and (max-width: 768px) {
    .header-bannerx {
        height: 250px;
    }

    .padding-about {
        padding-left: 0px;
        padding-right: 0px;
    }

    .header-img-height {
        height: 250px;
    }
}

@media only screen and (max-width: 600px) {
    .header-bannerx {
        height: 200px;
    }

    .header-img-height {
        height: 200px;
    }
}

.main-content {
    padding-bottom: 15px;
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem #f9f9f9;
}

.btn-nav-active {
    color: #fff !important;
    cursor: default;
}

/* footer */

.footer-content .main a {
    font-size: 18px !important;
}

@media (min-width: 320px) {
    .footer-content .main .title {
        font-size: 16px;
    }

    .footer-content .main a {
        font-size: 20px !important;
    }
}

.pdf_icon {
    width: 40px;
    height: auto;
}

.group-logo {
    width: 200px;
    height: auto;
    margin: 0;
}

div#st-1 {
    z-index: 0;
}

.st-btn {
    border-radius: 50% !important;
    margin-right: 5px !important;
}

/* CSR post image */
img.csr-photos {
    width: 100%;
    height: 250px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover;
    object-position: center;
}