#header .header-nav-main:before {
    background: #f2f3f5;
}

#header .header-btn-collapse-nav {
    background: var(--purple-brand);
}

#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a {
    color: var(--purple-brand);
}

/*#header .header-nav-main nav > ul li a {
    font-size: 13px;
    font-weight: 500;
}*/

#header .header-nav-main nav > ul li.dropdown .dropdown-menu {
    font-size: 13px !important;
    font-weight: 500 !important;
}


/* responsive mobile */
@media (max-width: 575.98px) {
    .mx-sm-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .mb-sm-2 {
        margin-bottom: 1rem !important;
    }

    .mb-sm-3 {
        margin-bottom: 1rem;
    }

    .px-sm-1 {
        padding-right: 1.5rem!important;
        padding-left: 1.5rem!important;
    }

    .pt-s-0 {
      padding-top: 0 !important;
    }

    .pt-sm-2 {
        padding-top: .5rem!important;
    }

    .pt-sm-3 {
        padding-top: 1rem!important;
    }

    .pt-sm-5 {
        padding-top: 3rem!important;
    }

    .pb-sm-0 {
      padding-bottom: 0 !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    #footer,
    #footer .social-btn {
        text-align: center;
    }

    .featured-fixed-button {
        display: none;
    }

    .featured-fixed-button-mobile {
        display: block;
        position: fixed;
        bottom: 10px;
        left: 10px;
        z-index: 2;
    }

    .pricing-table {
        display: block;
        flex-wrap: nowrap; 
        margin-left: 0; 
        margin-right: 0;
    }

    .pricing-table .plan .plan-header {
        border-radius: 10px 10px 0 0;
    }

    .pricing-table .plan .plan-footer {
        border-radius: 0 0 10px 10px;
    }

    .pricing-table .plan {
        border-radius: 10px;
    }

    #form-awb .container,
    #form-reference .container {
        width: 100%;
    }

    #form-awb .btn,
    #form-reference .btn {
        width: 100%;
    }

    .process-detail-tracking .process-vertical .process-step {
        padding-bottom: 10px;
    }

    .section-hero {
        margin-top: 0;
        width: 100%;
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
        margin-right: auto;
        margin-left: auto;
    }

    .section-hero .div-resi,
    .section-hero .div-ongkir,
    .section-hero .div-cabang {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .headline-banner {
        /*margin: 0 40px;*/
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .owl-carousel.stage-margin .owl-stage-outer {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
        margin-left: calc(var(--bs-gutter-x) * .5) !important;
        margin-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .owl-carousel.stage-margin .owl-stage-outer .owl-stage {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .owl-carousel {
        margin-bottom: 0;
    }

    .headline-banner .owl-dots {
        margin-top: -1.5rem;
    }

    .headline-banner .headline-banner-desktop,
    .page-banner .page-banner-desktop {
        display: none !important;
    }

    .headline-banner .headline-banner-mobile,
    .page-banner .page-banner-mobile {
        display: block !important;
    }

    .section-thank-you .thank-you-image {
        width: 100%;
        min-width: 0;
        height: 100%;
    }

    .image-desktop {
        display: none !important;
    }

    .image-mobile {
        display: block !important;
    }

    .card-branch-province {
        flex-direction: column;
        margin: 0 auto;
        height: initial;
    }

    .card-branch-province .branch-city-list {
        height: 25rem;
    }

    .card-branch-province .branch-city-map {
        padding: 0;
        border-radius: 0 0 10px 10px;
    }

    .card-branch-province .branch-city-map #map_canvas {
        border-radius: 0 0 10px 10px;
    }

    .relative-m {
        position: relative;
    }

    .pricing-list {
        padding: 1rem 0;
    }

    .pricing-list .pricing-list-item {
        margin-bottom: .5rem;
    }

    .pricing-list .call-to-action-content {
        padding: 10px;
    }

    .pricing-list img {
        width: 100px;
    }

    .pricing-list .col-sm-6 {
        flex: 0 0 auto;
        width: 50% !important;
    }

    .pricing-list .col-sm-12 {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .card-vertical .text-3-5 {
        font-size: 1.5em !important;
    }

    .card-vertical .text-3-5 {
        font-size: 1.5em !important;
    }

    .card-vertical .card-cta-text {
        font-size: 1.2em !important;
    }

    .table-investor tbody td {
        font-size: .95em;
    }

    .tabs.tabs-simple .nav-tabs > li .nav-link {
        padding: 10px 20px;
    }

    .tabs.tabs-simple .nav-tabs > li .nav-link, .tabs.tabs-simple .nav-tabs > li .nav-link:hover {
        padding: 10px 20px;
    }

    .section-feature-sahabat-satria .owl-carousel.nav-light:not(.nav-style-1):not(.nav-style-2):not(.nav-style-3):not(.show-nav-title):not(.nav-arrows-1) .owl-nav button[class*="owl-"] {
        background-color: transparent !important;
        border-color: var(--purple) !important;
        color: var(--purple) !important;
    }

    .card-career-form .card-body {
      padding: 0;
    }

    .img-sm-75 {
      width: 75%;
    }

    .order-sm-1 {
      order: 1 !important;
    }

    .order-sm-2 {
      order: 2 !important;
    }
}
/* end responsive mobile */

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .section-hero .div-resi,
    .section-hero .div-ongkir {
        padding-left: 0;
        padding-right: 0;
    }

    .select2 {
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .section-hero .div-resi,
    .section-hero .div-ongkir {
        padding-left: 0;
        padding-right: 0;
    }

    .select2 {
        width: 100% !important;
    }
}