.global-jumbotron {
    height: 390px !important;
    padding-top: 175px !important;
    padding-bottom: 25px !important;
}

.phar-persyaratan {
    color: #000;
    font-family: Open Sans;
    font-size: 22px;
    font-style: normal;
    line-height: 120%;
}

.subtitle-persyaratan {
    color: #00a7e4;
    font-family: Open Sans;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

@media (max-width: 768px) {
    .phar-persyaratan {
        font-size: 16px;
    }

    .subtitle-persyaratan {
        font-size: 20px;
    }
}

.title-page {
    margin: 0px 0px 114px 1px !important;
    padding: 0 !important;
}

.container {
    padding: 0px 1.5rem !important;
}

.link-page {
    margin: 0px !important;
}

/* sidebar */
.dotted-white {
    list-style: none;
}

.btn-close {
    background-color: #fff;
}

/* Desa */
.container-grid-produk-desa {
    width: auto;
    margin: 75px auto auto auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-row-gap: 100px;
    grid-column-gap: 55px;
}

.card-product-desa img {
    height: 200px;
    width: auto;
}

.product-desa-container {
    margin: 0px !important;
    padding: 70px !important;
}

.card-product-desa {
    text-align: center;
}

.product-desa-container .title-product-desa-container {
    text-align: center;
}

@media (max-width: 576px) {
    /*--------------------------------------------------------------
      # Global Mobile
    --------------------------------------------------------------*/

    .motif-card-container {
        gap: 46px !important;
        margin-top: 46px !important;
        padding: 0 !important;
    }

    .motif-card-container .motif-card {
        padding: 46px 24px 24px 24px !important;
        width: 100% !important;
    }

    .motif-card .card-motif-number {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
        font-size: 24px !important;
    }

    .motif-card h4 {
        font-size: 24px !important;
    }

    .motif-card p {
        font-size: 16px !important;
    }

    .footer-links {
        text-align: center !important;
    }

    .global-jumbotron {
        height: auto !important;
        padding-top: 150px !important;
    }

    .title-page {
        margin: 0px 0px 56px 22px !important;
        font-size: 24px !important;
    }

    .link-page {
        margin: 0px !important;
        font-size: 12px !important;
    }

    #navbarBurger.navbar-collapse.collapse.show {
        padding-bottom: 1.5rem !important;
    }

    /* Pemerintah */

    .product-pemerintah-card {
        width: 100% !important;
        margin: 1.5rem 0px 0px 0px !important;
    }

    .counter-compt {
        margin-top: 0 !important;
    }

    .counter-jabat {
        margin-top: 0 !important;
    }

    .contact-card {
        padding: 0px !important;
    }

    .contact-card svg {
        width: 40px;
    }

    .container-grid-produk-desa {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-row-gap: 50px;
        grid-column-gap: 25px;
    }

    .card-product-desa {
        text-align: center !important;
        padding: 12px !important;
    }

    .card-product-desa img {
        height: 150px !important;
    }

    .remove-margin-on-mobile {
        margin: 0px !important;
        padding: 0px !important;
    }

    .product-desa-container {
        margin: 0px !important;
        padding: 32px 0px !important;
    }

    /* Perbankan */
    .about-perbankan .row {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-kesehatan .row {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-kesehatan h3 {
        margin: 10px 0px 0px 0px !important;
        padding: 0px !important;
        font-size: 22px;
    }

    .about-kesehatan-image-mobile {
        margin: 0px !important;
        padding: 0px !important;
        width: 100% !important;
        height: auto !important;
    }

    .counter-perbankan {
        margin: 32px 0px !important;
    }

    .about-simedika {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-simedika .row {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-simedika h3 {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 22px;
    }

    h3.title-kesehatan {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 22px;
    }

    .btn-page-kesehatan {
        margin: 0px !important;
        width: auto !important;
    }

    .reset-button {
        background-color: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .about-puskesmas .row {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-puskesmas {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-askep .row {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-askep {
        margin: 0px !important;
        padding: 0px !important;
    }

    .card-produk-kesehatan {
        display: flex !important;
        flex-direction: column !important;
        align-items: start !important;
        text-align: left !important;
        padding: 32px 0px !important;
    }

    .card-produk-kesehatan h3,
    .card-produk-kesehatan p {
        text-align: start !important;
    }

    /* motif */
    .motif-card {
        margin: 12px 0px 0px !important;
        padding: 20px !important;
    }

    .motif-card p {
        padding: 8px 0px 0px 0px !important;
    }

    .about-kenapalst {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-kenapalst .row {
        margin: 36px 0px 0px 0px !important;
        padding: 24px 0px 0px 0px !important;
    }

    .kenapalst-heading-3 {
        margin: 8px 0px !important;
        padding: 0px !important;
        font-size: 20px !important;
        height: auto !important;
        text-align: start !important;
    }

    h2.kenapalst-heading-3 {
        text-align: center !important;
    }

    .kenapalst-paragraph {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 14px !important;
        text-align: start !important;
    }

    .about-kenapalst img {
        margin: 0px !important;
        width: 100% !important;
        height: 250px !important;
    }

    .benefit-kenapalst {
        margin: 0px !important;
        padding: 0px !important;
    }

    .benefit-kenapalst .row {
        margin: 36px 0px 0px 0px !important;
        padding: 24px 0px 0px 0px !important;
    }

    .benefit-kenapalst img {
        margin: 0px !important;
        width: 100% !important;
        height: 250px !important;
    }

    .about-pelanggan {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-pelanggan .row {
        margin: 36px 0px 0px 0px !important;
        padding: 24px 0px 0px 0px !important;
    }

    .about-pelanggan img {
        margin: 0px !important;
        width: 100% !important;
        height: 250px !important;
    }

    #img-peta {
        margin: 46px 0px 24px 0px !important;
        padding: 0px !important;
    }

    #img-peta div {
        margin: 0px !important;
        padding: 0px !important;
        height: 300px;
    }

    .img-peta {
        margin: 0px !important;
        padding: 0px !important;
        width: 100% !important;
        height: 100% !important;
    }

    .kab-layanan {
        margin: 0px !important;
        padding: 0px !important;
    }

    .kab-layanan .container {
        margin: 0px !important;
        padding: 0px 24px !important;
    }

    .kab-layanan .container .kab1 {
        margin: 0px !important;
        padding: 24px !important;
        height: 100% !important;
    }

    .kab-layanan .container .kab1.end-kab1 {
        margin: 0px !important;
        padding: 24px !important;
        height: auto !important;
    }

    #about-pelanggan>div>div>h2 {
        margin-bottom: 24px !important;
    }

    .on-mobile-hidden {
        display: none !important;
    }

    .kab-layanan .container .kab1 img {
        width: 80%;
    }

    .kab1 h5 {
        font-size: 14px !important;
    }

    .kab-layanan .container .kab1.end-kab1 {
        width: 47%;
        margin: auto !important;
        margin-bottom: 48px !important;
    }

    .kab-layanan {
        overflow-x: hidden !important;
    }

    /* karir */
    #about-karir .row {
        margin: 0 !important;
        padding: 12px 0px !important;
    }

    #about-karir h3 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 24px !important;
        text-align: left !important;
    }

    #about-karir p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    .card-karir {
        margin: 0 !important;
        padding: 0 !important;
    }

    .card-karir div,
    .btn-karir {
        padding: 5px 10px !important;
        margin: 0px !important;
    }

    .btn-karir {
        padding: 4px 12px !important;
        margin: 0 !important;
    }

    .card-karir .card-head1,
    .card-karir .card-head2,
    .card-karir .card-head3 {
        padding: 10px 20px !important;
    }

    .card-karir .card-body1,
    .card-karir .card-body3 {
        padding: 10px 20px !important;
        display: flex;
        gap: 12px;
        flex-direction: column;
        align-items: start;
    }

    #about-karir img {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #rekrutmen .row {
        margin: 0 !important;
        padding: 24px 0px !important;
    }

    #rekrutmen h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 24px !important;
    }

    #rekrutmen img {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .rekrutmen-container p {
        font-size: 24px !important;
    }

    #team h2 {
        font-size: 24px !important;
    }

    .member {
        margin: 0 !important;
        padding: 20px !important;
    }

    .member img {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-my-4 {
        margin: 12px 0px !important;
    }

    /* program-hc */

    .program-hc {
        margin: 16px 0px 72px 0px !important;
        padding: 18px 0 !important;
    }

    .program-hc img {
        margin: 24px 0px 0px 0px !important;
        padding: 0 !important;
    }

    .program-hc h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 24px !important;
    }

    .program-image-container {
        display: flex;
        justify-content: center !important;
    }

    /* reward */

    .reward .row img {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .gathering,
    .pelatihan,
    .pelatihan,
    .seminar {
        margin: 0px 0px 72px 0px !important;
        padding: 0 !important;
    }

    .gathering h3,
    .pelatihan h3,
    .pelatihan h3,
    .seminar h3,
    .gathering .program-paragraph,
    .pelatihan .program-paragraph,
    .pelatihan .program-paragraph,
    .seminar .program-paragraph {
        padding: 0 !important;
        text-align: start !important;
    }

    .reward .row,
    .gathering .row,
    .pelatihan .row,
    .pelatihan .row,
    .seminar .row {
        margin: 0px 0px 48px 0px !important;
        padding: 0 !important;
    }

    .gathering .row {
        margin: 0 !important;
        padding: 0 !important;
    }

    .img-gathering,
    .img-seminar,
    .img-pelatihan {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .program-h3 {
        font-size: 20px !important;
    }

    .program-paragraph {
        font-size: 16px !important;
    }

    .section-hub {
        margin: 0 auto !important;
        padding: 40px 24px !important;
    }

    .section-hub div {
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-hub .row {
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-hub img {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .section-hub h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        font-weight: bold !important;
    }

    .section-hub .counter-item1,
    .section-hub .counter-item2,
    .section-hub .counter-item3 {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 24px !important;
        height: auto !important;
        justify-content: space-between !important;
    }

    .section-hub .counter-item2 svg {
        margin: 0px auto !important;
        width: 56px !important;
        height: 56px !important;
    }

    .section-hub .counter-item {
        display: flex !important;
        flex-direction: column !important;
        margin: 20px 0px !important;
        height: auto !important;
        justify-content: space-between !important;
        padding: 20px !important;
    }

    .section-hub .counter-item svg {
        margin: 0px auto !important;
        width: 72px !important;
    }

    .section-hub h3 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 24px !important;
        font-weight: bold !important;
    }

    .section-hub p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

    .section-hub .alamatoffice {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
    }

    .img-tifa {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .maps-frame {
        width: 100% !important;
    }

    .float-end {
        margin: 72px 0px 24px 0px !important;
    }

    body>div.container-fluid.w-75.w-md-50.section-hub>div>div:nth-child(2)>div>h2 {
        margin: 56px 0px 12px 0px !important;
    }

    body>div.container-fluid.w-75.w-md-50.section-hub>div>div:nth-child(2)>div>a>button {
        margin: 12px 0px 0px 0px !important;
    }

    .about-startup .row {
        padding: 0px !important;
        margin: 0px !important;
    }

    .about-startup .row img {
        padding: 0px !important;
        margin: 0px auto !important;
        width: 80% !important;
        height: auto !important;
    }

    .about-startup .row .col-12 {
        padding: 0px !important;
        text-align: center !important;
    }

    .layanan-startup {
        margin: 56px 0px !important;
    }

    .layanan-startup img {
        padding: 0px !important;
        margin: 32px auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .navbar-collapse.collapse.show {
        padding-bottom: 1.5rem !important;
    }

    .dropdown-menu.show {
        position: relative;
        width: 100% !important;
        left: 0px !important;
    }

    .dropdown-menu.show .row.p-2 {
        margin: 0px !important;
    }

    .dropdown-menu.show button {
        bottom: 0px !important;
        right: 0px !important;
        left: auto !important;
        margin-top: 0px !important;
    }

    #navbarNav>ul:nth-child(2)>li:nth-child(1)>button.custom-login-button {
        margin-top: 24px !important;
    }

    .about-startup h3 {
        font-size: 24px !important;
    }

    .about-startup p {
        font-size: 16px !important;
    }

    .counter-startup {
        height: 200px !important;
    }

    .counter-startup .overlay h3 {
        font-size: 24px !important;
    }

    .layanan-startup .title-layanan {
        font-size: 24px !important;
    }

    .layanan-startup .card-startup-layanan {
        padding: 15px 30px !important;
        margin: 20px !important;
    }

    .layanan-startup .card-startup-layanan .img-container {
        height: 120px !important;
    }

    .card-magang-vacancy .card-body-magang-vancancy {
        flex-direction: column !important;
        gap: 12px;
    }

    .card-magang-vacancy .card-body-magang-vancancy .card-title,
    .card-magang-vacancy .card-body-magang-vancancy .btn-magang,
    .card-magang-vacancy .card-body-magang-vancancy .card-text {
        width: 100% !important;
        text-align: center !important;
    }

    .info-magang h2 {
        font-size: 24px !important;
    }

    .about-layanan .row {
        padding: 0px !important;
        margin: 0px !important;
    }

    .about-layanan p {
        font-size: 18px !important;
        padding: 0px !important;
        margin: 0px !important;
    }

    .container-content-benefit-layanan p {
        font-size: 16px !important;
        padding: 0px 0px 0px 22px !important;
        text-align: justify !important;
        margin: 0px !important;
    }

    .benefit-layanan h3 {
        font-size: 24px !important;
        padding: 0px !important;
        margin: 0px 0px 24px 0px !important;
    }

    .benefit-layanan h5 {
        font-size: 16px !important;
        padding: 12px 0px !important;
        margin: 0px !important;
    }

    .about-layanan-2 .row {
        padding: 0px !important;
        margin: 0px !important;
    }

    .about-layanan-2 p {
        font-size: 18px !important;
        padding: 0px !important;
        margin: 0px !important;
    }

    .container-content-benefit-layanan-2 p {
        font-size: 16px !important;
        padding: 0px 0px 0px 22px !important;
        text-align: justify !important;
        margin: 0px !important;
    }

    .benefit-layanan-2 h3 {
        font-size: 24px !important;
        padding: 0px !important;
        margin: 0px 0px 24px 0px !important;
    }

    .benefit-layanan-2 h5 {
        font-size: 16px !important;
        padding: 12px 0px !important;
        margin: 0px !important;
    }

    .container-content-benefit-layanan-2 li {
        font-size: 14px !important;
    }

    .address-map-section {
        flex-wrap: wrap;
    }

    .img-tifa {
        width: 50% !important;
        height: auto !important;
    }

    .info-container.section-hub .container-getin-touch {
        flex-direction: column;
        gap: 20px;
    }

    .address-map-section {
        width: 100% !important;
        text-align: center;
        padding: 20px 0px !important;
        gap: 24px !important;
    }

    .address-map-section .alamatoffice h3 {
        text-align: center;
        margin-bottom: 10px !important;
    }

    #maps>div>h2 {
        margin-bottom: 24px !important;
    }

    h3.title-contact-cs {
        font-size: 88px !important;
        text-align: center !important;
    }

    .contact-hub-content-container .vertical-line {
        height: 1px !important;
        width: 50% !important;
        margin: auto !important;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    /*--------------------------------------------------------------
      # Global Tablet
    --------------------------------------------------------------*/

    .motif-card-container {
        gap: 46px !important;
        margin-top: 46px !important;
        padding: 0 !important;
    }

    .motif-card-container .motif-card {
        padding: 46px 24px 24px 24px !important;
        width: 100% !important;
    }

    .motif-card .card-motif-number {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
        font-size: 18px !important;
    }

    .about-kenapalst {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-kenapalst .row {
        margin: 36px 0px 0px 0px !important;
        padding: 24px 0px 0px 0px !important;
    }

    .kenapalst-heading-3 {
        margin: 8px 0px !important;
        padding: 0px !important;
        font-size: 20px !important;
        height: auto !important;
        text-align: start !important;
    }

    h2.kenapalst-heading-3 {
        text-align: center !important;
    }

    .kenapalst-paragraph {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 14px !important;
        text-align: start !important;
    }

    .about-kenapalst img {
        margin: 0px !important;
        height: 250px !important;
    }

    .benefit-kenapalst {
        margin: 0px !important;
        padding: 0px !important;
    }

    .benefit-kenapalst .row {
        margin: 36px 0px 0px 0px !important;
        padding: 24px 0px 0px 0px !important;
    }

    .benefit-kenapalst img {
        margin: 0px !important;
        width: 100% !important;
        height: 250px !important;
    }

    .about-pelanggan {
        margin: 0px !important;
        padding: 0px !important;
    }

    .about-pelanggan .row {
        margin: 36px 0px 0px 0px !important;
        padding: 24px 0px 0px 0px !important;
    }

    .about-pelanggan img {
        margin: 0px !important;
        width: 100% !important;
        height: 250px !important;
    }

    #img-peta {
        margin: 46px 0px 24px 0px !important;
        padding: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #img-peta div {
        margin: 0px !important;
        padding: 0px !important;
        height: 300px;
    }

    .img-peta {
        margin: 0px !important;
        padding: 0px !important;
        width: 100% !important;
        height: 100% !important;
    }

    #kab-layanan {
        margin-top: -240px;
    }

    .kab-layanan .container {
        padding: 0px 24px !important;
    }

    .kab-layanan .container .kab1 {
        margin: 0px !important;
        padding: 24px !important;
        height: 100% !important;
    }

    #regencies-wrapper > div {
        padding: 16px !important;
    }

    .kab-layanan .container .kab1.end-kab1 {
        margin: 0px !important;
        padding: 24px !important;
        height: auto !important;
    }

    #about-pelanggan > div > div > h2 {
        margin-bottom: 24px !important;
    }

    .on-mobile-hidden {
        display: none !important;
    }

    .kab-layanan .container .kab1 img {
        width: 80%;
    }

    .kab1 h5 {
        font-size: 14px !important;
    }

    .kab-layanan .container .kab1.end-kab1 {
        width: 47%;
        margin: auto !important;
        margin-bottom: 48px !important;
    }

    .kab-layanan {
        overflow-x: hidden !important;
    }
}

.about-startup h3 {
    color: #000;
    font-family: Open Sans;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.182%;
    /* 48.073px */
}

.about-startup p {
    color: #606060;
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
}

.about-startup .img-roket {
    width: 100% !important;
    margin: 0px !important;
    height: 450px !important;
}

.counter-startup {
    background-image: url("../img/c2f63bfbefff797cd6e7b2bae15478b0.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 390.419px;
    margin-bottom: 56px;
}

.counter-startup .overlay {
    background-color: #ff7a0099;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.counter-startup .overlay h3 {
    color: #fff;
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    /* 48px */
}

.layanan-startup {
    margin-bottom: 56px;
}

.layanan-startup .title-layanan {
    background: linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 57.687px */
    letter-spacing: 1.92px;
}

.layanan-startup .card-startup-layanan {
    padding: 30px 60px;
    margin: 40px;
    height: auto;
    display: flex;
    align-items: center;
    border-radius: 19px;
    background: var(--White, #fff);
    box-shadow: 6px 4px 25px 6px rgba(0, 0, 0, 0.16);
}

.layanan-startup .card-startup-layanan .img-container {
    height: 180px;
    width: 100%;
    display: flex;
}

.layanan-startup .card-startup-layanan img {
    padding: 0px;
    margin: 32px auto;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.card-magang-vacancy {
    display: flex;
    width: 100%;
    padding: 30px 40px;
    justify-content: space-between;
    align-items: center;
    border-radius: 13px;
    border: 1px solid #d2d2d2;
    background: var(--White, #fff);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);
}

.card-magang-vacancy .card-body-magang-vancancy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.card-magang-vacancy .card-body-magang-vancancy .card-title {
    margin: 0px !important;
    padding: 0px !important;
    width: 30%;
    color: #154996;
}

#about-karir>div>div.row.row-cols-1.row-cols-md-3.g-4>div:nth-child(1)>div>div.card-head1>p,
#about-karir>div>div.row.row-cols-1.row-cols-md-3.g-4>div:nth-child(2)>div>div.card-head2>p,
#about-karir>div>div.row.row-cols-1.row-cols-md-3.g-4>div:nth-child(3)>div>div.card-head3>p {
    padding: 0px 10px !important;
}

.card-magang-vacancy .card-body-magang-vancancy .card-text {
    margin: 0px !important;
    padding: 0px !important;
    width: 40%;
}

.card-karir .card-text-body {
    margin: 0px !important;
    padding: 24px !important;
    height: 230px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: start;
}

.card-karir .card-text {
    margin: 0px !important;
    padding: 0 !important;
}

.card-karir .card-text-body .card-text {
    margin: 0px !important;
    padding-bottom: 20px !important;
}

.card-karir .card-head1 .card-title,
.card-karir .card-head2 .card-title,
.card-karir .card-head3 .card-title {
    margin: 0px !important;
    padding: 5px 10px 0px 10px;
}

.card-karir .card-head1 .card-text,
.card-karir .card-head2 .card-text,
.card-karir .card-head3 .card-text {
    margin: 0px !important;
    padding: 5px 10px 0px 10px !important;
}

.card-karir .btn-karir {
    margin: 0px !important;
}

.card-magang-vacancy .card-body-magang-vancancy .btn-magang {
    margin: 0px !important;
    display: flex;
    padding: 8px 24px !important;
    justify-content: center;
    align-items: center;
    width: 20%;
}

.info-magang {
    margin-top: 56px;
    margin: 56px 0px !important;
}

.info-magang h2 {
    padding: 0px !important;
    margin: 0px !important;
    text-align: center;
    width: 100%;
    text-align: center;
    font-family: Open Sans;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 43.2px */
    background: linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-layanan {
    padding: 60px 0px;
}

.about-layanan-paragraph {
    color: var(--Text-Content, #606060);
    text-align: right;
    font-family: Open Sans;
    font-size: 24px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
    /* 31.92px */
}

.benefit-layanan {
    padding: 0px 0px 60px 0px;
}

.benefit-layanan h3 {
    background: var(--H3-Gradient,
            linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 57.687px */
    letter-spacing: 1.92px;
    margin-bottom: 32px;
}

.container-content-benefit-layanan h5 {
    color: var(--Black-SubTitle, #000000);
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 38.4px */
}

.about-layanan p {
    color: #000000;
    font-family: Open Sans;
    font-size: 40px;
    font-style: normal;
    text-align: left;
    font-weight: 400;
    line-height: 120%;
    /* 48px */
}

.container-content-benefit-layanan p {
    color: #000000;
    text-align: justify;
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-left: 36px;
}

.about-layanan-2 {
    padding: 60px 0px;
}

.benefit-layanan-2 {
    padding: 0px 0px 60px 0px;
}

.benefit-layanan-2 h3 {
    background: var(--H3-Gradient,
            linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 57.687px */
    letter-spacing: 1.92px;
    margin-bottom: 32px;
}

.about-layanan-2 p {
    color: #000;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 43.2px */
}

.container-content-benefit-layanan-2 p {
    color: #606060;
    text-align: justify;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 38.4px */
    margin-left: 36px;
}

.container-content-benefit-layanan-2 h5 {
    color: var(--Black-SubTitle, #4e4e4e);
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 38.4px */
}

.container-content-benefit-layanan-2 li {
    color: #000;
    text-align: justify;
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 28.8px */
}

.section-hub h2.section-hub-title {
    background: var(--H3-Gradient,
            linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 57.687px */
    letter-spacing: 1.92px;
}

.contact-hub-content-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 60px 0px;
}

.contact-hub-content-container .item {
    width: 100%;
}

.contact-hub-content-container .vertical-line {
    width: 1px;
    height: 212px;
    background-color: #fd6007;
}

.contact-hub-content-container svg {
    width: 60px;
}

.contact-hub-content-container p {
    margin: 30px 0px 0px 0px;
    padding: 0px;
}

.info-container.section-hub {
    margin-top: 200px;
}

.info-container.section-hub .container-getin-touch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.info-container.section-hub .container-getin-touch h2 {
    margin: 0px;
    padding: 0px;
    color: #fff;
    text-align: center;
    font-family: Open Sans;
    font-size: 59px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 59px */
}

.maps.section-hub .section-hub-title {
    margin: 180px 0px 90px 0px;
}

.address-map-section {
    display: flex;
    width: 70%;
    margin-left: 36px;
    gap: 130px;
}

.address-map-section .alamatoffice {
    margin: 0px;
}

.address-map-section .alamatoffice h3 {
    color: #000;
    font-family: Open Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 138.182%;
    /* 27.636px */
}

.img-tifa {
    margin: 0px;
    width: 516.537px !important;
    height: 516.537px !important;
}

.maps-frame {
    margin-top: -200px;
    width: 100%;
}

h3.title-contact-cs {
    background: var(--H3-Gradient,
            linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: Open Sans;
    font-size: 128px;
    font-style: normal;
    font-weight: 800;
    line-height: 120.182%;
    /* 153.833px */
    letter-spacing: 5.12px;
}

/*  motif-card */
.motif-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 120px;
    justify-content: center;
    align-items: center;
    margin-top: -76px;
}

.motif-card {
    border-radius: 20px;
    background: var(--White, #fff);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 76px 33px 46px 33px;
    width: 351px;
    flex-shrink: 0;
}

.motif-card .card-motif-number {
    border-radius: 32px;
    background: #00a7e4;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
    width: 86px;
    height: 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 43px;
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 55px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 55px */
    transform: translateY(-50%);
}

.motif-card h4 {
    color: #000;
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 32px */
}

.motif-card p {
    color: #606060;
    font-family: Open Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 20px */
    margin-top: 33px;
}

.benefit-kenapalst .kenapalst-heading-3 {
    color: var(--Black-SubTitle, #4e4e4e);
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 96%;
    /* 30.72px */
    margin-left: 0px;
}

.benefit-kenapalst .kenapalst-paragraph {
    color: var(--Text-Content, #606060);
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 96%;
    margin-left: 0px;
}

/* animation card news */
.card-news {
    border-radius: 30px;
    background: #9a9a9a;
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    height: 600px !important;
    width: 22rem;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.card-news .img-card-news {
    width: 100%;
    height: 285px;
    object-fit: cover;
}

.card-news .card-body {
    border: 1px solid red;
    height: 600px;
}

.card-news .card-news-content {
    border-radius: 30px 30px 0px 0px;
    background: var(--White, #fff);
    box-shadow: 0px -10px 50px 0px rgba(0, 0, 0, 0.25);
    padding: 45px 45px 80px 45px;
    margin-top: -25px;
    height: 60% !important;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 10;
    transition: all 0.3s ease;
    cursor: pointer;
}

@keyframes card-news-content-animation {
    0% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: translateY(45px);
    }

    24% {
        opacity: 1;
    }

    40% {
        animation-timing-function: ease-in;
        transform: translateY(24px);
    }

    65% {
        animation-timing-function: ease-in;
        transform: translateY(12px);
    }

    82% {
        animation-timing-function: ease-in;
        transform: translateY(6px);
    }

    93% {
        animation-timing-function: ease-in;
        transform: translateY(4px);
        height: 100% !important;
    }

    25%,
    55%,
    75%,
    87% {
        animation-timing-function: ease-out;
        transform: translateY(0px);
    }

    100% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0px);
    }
}

.card-news .card-news-content:hover {
    animation: card-news-content-animation 2s ease 0s 1 normal forwards;
    height: 80% !important;
}

.card-news-desc-additional {
    overflow: hidden;
    color: var(--Text-Content, #606060);
    text-overflow: ellipsis;
    font-family: Open Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.182%;
    /* 18.027px */
    display: none;
}

@keyframes card-news-desc-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes card-news-desc-additional-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.card-news .card-news-content:hover .card-news-desc-additional {
    display: block !important;
    animation: card-news-desc-additional-animation 0.9s ease 0s 1 normal forwards;
}

.card-news .card-news-content:hover .card-news-desc {
    display: none !important;
    animation: card-news-desc-animation 0.9s ease 0s 1 normal forwards;
}

.card-news .card-news-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    width: 100%;
    padding-bottom: 27px;
    display: flex;
    align-items: center;
    padding: 23px 45px;
    z-index: 20;
}

.card-news .card-news-button a {
    white-space: nowrap;
    width: auto;
    border-radius: 60px;
    background: linear-gradient(90deg, #00838b 36.37%, #20b95d 99.95%);
    padding: 12px 24px;
    color: #fffcfc;
    text-align: center;
    font-family: Open Sans;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 15.624px */
}

.card-news-title {
    color: #000;
    font-family: Open Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 24.036px */
}

.card-news-author {
    color: #606060;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120.182%;
    /* 16.825px */
}

.card-news-author .card-news-author-name {
    color: #00a7e4;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
}

.card-news-desc {
    overflow: hidden;
    color: var(--Text-Content, #606060);
    text-overflow: ellipsis;
    font-family: Open Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.182%;
    /* 18.027px */
    display: block;
}

.swiper {
    width: 100%;
    padding: 24px;
}

.swiper .swiper-wrapper {
    height: auto;
    width: auto;
    padding: 10px 7px;
}

.swiper .swiper-wrapper .swiper-slide {
    width: auto !important;
}

/* Responsive card news */
@media (max-width: 576px) {
    .swiper {
        width: 100%;
        padding: 0px !important;
    }

    .swiper .swiper-wrapper .swiper-slide {
        margin-right: 20px;
    }

    .card-news {
        border-radius: 16px;
        height: 400px !important;
        width: 16rem;
    }

    .card-news .img-card-news {
        width: 100%;
        height: 285px;
        object-fit: cover;
    }

    .card-news .card-body {
        border: 1px solid red;
        height: 400px;
    }

    .card-news .card-news-content {
        border-radius: 16px 16px 0px 0px;
        padding: 20px 20px 40px 20px;
        margin-top: -16px;
    }

    .card-news .card-news-button {
        padding-bottom: 14px;
        padding: 14px 20px;
    }

    .card-news .card-news-button a {
        padding: 8px 14px;
        font-size: 11px;
    }

    .card-news-title {
        font-size: 14px;
    }

    .card-news-author {
        font-size: 11px;
    }

    .card-news-desc {
        font-size: 12px;
        text-align: justify;
    }

    .card-news-desc-additional {
        font-size: 12px;
        text-align: justify;
    }
}

.title-section {
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 57.687px */
    letter-spacing: 1.92px;
    background: var(--H3-Gradient,
            linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.desc-section {
    color: #000;
    text-align: center;

    /* Content1 */
    font-family: Open Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 38.4px */
}

.btn-primary-custom {
    color: #fffcfc;
    text-align: center;
    font-family: Open Sans;
    font-size: 15px;
    font-style: normal;
    width: auto;
    font-weight: 700;
    line-height: 120.182%;
    /* 18.027px */
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    background: var(--H3-Gradient,
            linear-gradient(90deg, #2025ad 1.95%, #9b0ccd 119.9%));
    margin: auto;
}

.counter-text {
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    /* 48px */
}

@media (max-width: 576px) {
    .title-section {
        text-align: left;
        font-size: 20px;
    }

    .desc-section {
        font-size: 16px;
        text-align: left;
    }

    .btn-primary-custom {
        font-size: 12px;
        padding: 8px 12px;
        margin: 0px 10px;
    }

    .counter-text {
        text-align: center;
        font-size: 24px;
        margin: 0px !important;
    }

    .layanan-container {
        padding: 32px !important;
    }

    .about-layanan-title {
        font-size: 24px !important;
        text-align: start !important;
    }

    .product-pemerintah-card-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .product-pemerintah-card {
        padding: 30px 24px 30px 33px !important;
        gap: 20px !important;
    }

    .product-pemerintah-card:nth-child(2n + 0) {
        background: var(--CardGrey2, #f3f3f3) !important;
    }

    .product-pemerintah-card:nth-child(2n + 1) {
        background: var(--CardGrey1, #d7d7d7) !important;
    }

    .product-pemerintah-card h4 {
        font-size: 22px !important;
    }

    .product-pemerintah-card p {
        font-size: 18px !important;
    }

    .product-pemerintah-card img {
        width: 100% !important;
    }

    .product-pemerintah-card .btn-pemerintah-card {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .counter-compt {
        margin-top: 24px !important;
        font-size: 28px !important;
        padding: 60px 0px !important;
    }

    .counter-jabat-container {
        flex-direction: column;
        gap: 32px;
    }

    .counter-jabat-container .vertical-line {
        height: 1px !important;
        width: 212.372px !important;
    }

    .counter-jabat {
        font-size: 24px !important;
        padding: 40px 0px !important;
    }

    .counter-jabat .counter-item p {
        margin-top: 30px !important;
    }
}

.about-layanan-title {
    color: #000;
    text-align: right;
    font-family: Open Sans;
    font-size: 31px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.182%;
    /* 37.256px */
}

/* Produk Pemerintah */

.product-pemerintah-card-container {
    display: grid;
    grid-template-columns: repeat(2, 33rem);
    justify-content: center;
}

.product-pemerintah-card {
    color: #000;
    display: flex;
    padding: 62px 49px 62px 66px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex-shrink: 0;
    background: var(--CardGrey2, #f3f3f3);
}

.product-pemerintah-card img {
    width: 100%;
}

.product-pemerintah-card:nth-child(3n + 1) {
    background: var(--CardGrey1, #d7d7d7);
}

.product-pemerintah-card h4 {
    color: #000;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 105.5%;
    /* 33.76px */
}

.product-pemerintah-card p {
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
    /* 31.92px */
}

.product-pemerintah-card .btn-pemerintah-card {
    display: flex;
    width: 156px;
    padding: 9px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 37px;
    background: #00a7e4;
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    /* 16.825px */
}

.counter-compt {
    margin-top: 0px;
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    /* 48px */
    padding: 120px 0px;
}

.counter-jabat {
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
    /* 31.92px */
    margin-top: 0;
    padding: 90px 0px;
}

.counter-jabat .counter-item p {
    margin-top: 60px;
}

.counter-jabat-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.counter-jabat-container .vertical-line {
    width: 1px;
    height: 212.372px;
    background: #fff;
}

/* custom section divider */
.section-divider {
    width: 100%;
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

.section-divider img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.section-divider .overlay {
    background: linear-gradient(0deg,
            rgba(71, 131, 34, 0.9) 0%,
            rgba(71, 131, 34, 0.9) 100%),
        lightgray -133.096px -550.812px / 112.498% 368.829% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: 10;
}

.section-divider .content {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 65px;
}

.section-divider .content .title {
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    max-width: 827.273px;
}

.section-divider .content .subtitle {
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 134%;
    /* 32.16px */
    margin-top: -30px;
}

.section-divider .content .paragraf {
    color: var(--White, #fff);
    text-align: center;
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 134%;
    /* 32.16px */
    max-width: 652.883px;
    margin-top: -42px;
}

.section-divider .content a {
    color: #696969;
    text-align: center;
    font-family: Open Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.182%;
    display: flex;
    width: auto;
    padding: 12px 48px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 60px;
    background: #fff;
}

@media (max-width: 576px) {
    .section-divider {
        padding: 32px 0;
        margin-top: 20px;
    }

    .section-divider .content .title {
        font-size: 24px !important;
        max-width: 300px;
    }

    .section-divider .content {
        gap: 24px !important;
    }

    .section-divider .content a {
        font-size: 12px;
        padding: 8px 24px;
    }

    .section-divider .content .subtitle {
        font-size: 20px !important;
        margin-top: -0px !important;
    }

    .section-divider .content .paragraf {
        font-size: 18px !important;
        margin-top: 0px !important;
    }
}