/* @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans/OpenSans-VariableFont_wdth,wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans/OpenSans-Italic-VariableFont_wdth,wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ========================== ROOT COLOR ==========================*/
    --c-primary: #164194;
    /* Deep navy - Primary */
    --c-secondary: #2f73c4;
    --c-tertiary: #cbe1fc;
    --c-body: #f5f9fd;
    --c-black: #181c24;
    --c-menu: #515661;
    --c-label: #a5a9b7;
    /* Soft black */
    --c-info: #8a8f94;
    /* Cool gray */
    --c-primary-20: #ced9ea;
    --c-white: #ffffff;
    --c-grey: #b0b0b0;
    /* Neutral grey */
    --c-yellow: #fff039;
    /* Holding (Hasnur) Color */
    --c-red: #c62828;
    --c-border: #1e1e1e;
    --c-disabled: #dee1e8;
    --c-transparent: transparent;
    --c-skeleton: #2f72c40c;
    --c-hover: #2f73c4;
    --c-wa: #25d366;
    --shadow-bg: 0px 6px 18px rgb(0 0 0 / 8%);
    --shadow-skeleton: 0px 6px 18px rgb(0 0 0 / 3%);
    --ts-cubic: all 0.3s cubic-bezier(0.47, 0.71, 0.66, 0.84);

    /* ========================== ROOT TYPOGRAPHY ==========================*/
    --f-heading: "Inter", sans-serif;
    --f-body: "Open Sans", sans-serif;

    --fs-xs: 10px;
    --fs-s: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;

    --l-h-s: 1;
    --l-h-sm: 1.25;
    --l-h-base: 1.6;
    --l-h-lg: 1.85;
    --f-w-light: 300;
    --f-w-regular: 400;
    --f-w-medium: 500;
    --f-w-semibold: 600;
    --f-w-bold: 700;
    --f-w-xbold: 800;
    --f-w-xxbold: 900;

    /* ========================== ROOT SPACING ==========================*/
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-xxl: 64px;
    --space-xxxl: 80px;

    /* ========================== ROOT RADIUS ==========================*/
    --rd-none: 0;
    --rd-sm: 4px;
    --rd-md: 8px;
    --rd-lg: 12px;
    --rd-xl: 16px;
    --rd-xxl: 20px;
    --rd-xxxl: 24px;
    --rd-50: 50%;

    /* ========================== ROOT TRANSITION ==========================*/
    --ts-fast: 0.2s ease-in-out;
    --ts-slow: 0.4s ease;
    --ts-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
::before,
::after,
hr,
hr::before,
hr::after,
input[type="search"],
input[type="search"]::before,
input[type="search"]::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::selection {
    background: var(--c-secondary);
    color: var(--c-white);
}

html,
body {
    font-family: var(--f-body);
    font-optical-sizing: auto;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: normal;
    font-weight: 400;
    font-style: normal;
    background-color: var(--c-body);
    color: var(--c-black);
    width: 100%;
    height: 100%;
    /* overflow-x: hidden; */
    overflow-y: overlay;
    transition: ease 0.3s;
}

body.no-scroll {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--f-heading);
}

h1 {
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

h3 {
    font-size: 2.5rem;
    font-weight: 700;
}

h4 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

h5 {
    font-size: 1.5625rem;
    line-height: 1.5;
}

h6 {
    font-size: 1.25rem;
    line-height: 1.2;
}

p {
    font-size: 1rem;
    font-weight: 400;
}

p:last-child {
    margin-bottom: 0px;
}

small {
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0;
}

ul {
    list-style: none;
    padding: 0px;
    margin-left: 12px;
}

a {
    color: var(--c-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    /* text-decoration: none; */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-font-smoothing: antialiased;
}

a:hover,
a:focus,
a:active {
    color: var(--c-primary);
}

span,
i {
    transition: all 0.3s;
}

figure,
address {
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

img.icon-16 {
    width: 1rem;
    height: 1rem;
}

img.icon-24 {
    width: 1.5rem;
    height: 1.5rem;
}

img.icon-32 {
    width: 2rem;
    height: 2rem;
}

img.icon-48 {
    width: 3rem;
    height: 3rem;
}

img.icon-64 {
    width: 4rem;
    height: 4rem;
}

.img-128 {
    width: 8rem;
}

.img-192 {
    width: 12rem;
}

.img-240 {
    width: 15rem;
}

.img-280 {
    width: 17.5rem;
}

.img-352 {
    width: 22rem;
}

.img-512 {
    width: 32rem;
}

.img-rounded {
    border-radius: 50%;
}

.shadow-bg {
    box-shadow: var(--shadow-bg);
}

hr {
    margin-top: 1.2496px;
    margin-bottom: 1.2496px;
    border: 0;
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.1);
}

i {
    transition: all 0.3s;
}

.ts-03 {
    transition: ease-in-out 0.3s;
}

.ts-05 {
    transition: ease-in-out 0.5s;
}

.ts-spring {
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========================== FORM FIELD ==========================*/

.form-control:focus,
.has-warning .form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--c-black);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

input[type="search"]::-moz-search-clear-button {
    display: none;
}

.form-control[disabled] {
    border: 0;
    background-color: var(--c-disabled);
}

.form-control[disabled]:hover {
    border: 0;
}

.form-group {
    position: relative;
    margin-bottom: 1rem;
}

.form-group-icon {
    position: relative;
    height: 100%;
}

.form-group-icon input.form-control {
    padding-right: 1rem;
}

.form-group-icon .search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #555;
    z-index: 10;
}

.form-group-icon input.form-control:focus {
    outline: none;
}

.form-group-icon input.form-control {
    padding-left: 3rem;
    border-radius: 14px 0px 0px 14px;
    border: 1px solid #ddd;
    font-size: 1rem;
    height: 100%;
}

.form-group-icon .clear-icon {
    position: absolute;
    right: 68px;
    font-size: 1rem;
    color: #999;
    cursor: pointer;
}

.section-contact-hero select.form-control {
    border: 1px solid #ddd;
}

.form-control::placeholder {
    opacity: 0.3;
}

.has-error .form-control {
    box-shadow: none;
}

input.form-control,
textarea.form-control {
    padding: 0.75rem;
    color: var(--c-black);
    font-weight: 500;
    background-color: var(--c-white);
    border: 1px solid var(--c-grey);
    border-radius: 8px;
    opacity: 1;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #292929;
}

input.form-control:hover,
input.form-control:focus,
input.form-control:active {
    color: var(--c-black);
    background-color: var(--c-white);
    border-color: var(--c-primary);
}

input.form-control[readonly] {
    background-color: var(--c-disabled);
    cursor: default;
    border: 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

select.form-control {
    cursor: pointer;
    height: auto;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 1rem;
    /* letter-spacing: 1rem; */
    font-weight: 500;
    /*background-color: 08284b;*/
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--rd-xxxl);
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: 90% 50%;
    background-repeat: no-repeat;
    background-image: url("../images/general/dd-b-bot.svg");
    background-size: 0.75rem;
    box-shadow: none;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

select.form-control:hover,
select.form-control:focus,
select.form-control:active {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.placeholder-select option[disabled] {
    opacity: 0.7;
}

.select2-container--default .select2-selection--single {
    height: 2.5rem !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--c-black) !important;
    font-size: 1rem !important;
    font-weight: 600;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0.3125rem !important;
}

ul.select2-results__options > li:hover {
    color: var(--c-black) !important;
    /* background-color: #ffe3b8 !important; */
}

.select2-container--default .select2-results__option--selected {
    color: var(--c-white) !important;
    background-color: var(--c-primary) !important;
}

.select2-results__option.select2-results__option--selectable.select2-results__option--selected.select2-results__option--highlighted {
    color: var(--c-white) !important;
    background-color: var(--c-primary) !important;
}

li.select2-results__option--selectable {
    color: var(--c-black) !important;
}

input.form-control:hover,
input.form-control:focus,
input.form-control:active,
textarea.form-control:hover,
textarea.form-control:focus,
textarea.form-control:active {
    color: #09041e;
    background-color: var(--c-white);
    border: 1px solid var(--c-primary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

label {
    word-break: break-word;
}

label.control-label {
    position: relative;
    font-size: 1rem;
    color: var(--c-black);
    /* letter-spacing: .0625rem; */
    font-weight: 400;
    border-radius: 0;
    margin-left: 0;
    margin-bottom: 0.25rem;
}

.underline {
    text-decoration: underline;
}

/*====================================== SECTION MODAL SECTION ======================================*/
.modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

.modal-content {
    background-color: #fff;
    border: 0;
    border-radius: var(--rd-xl);
}

.modal-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    /* margin: 0 1.5rem; */
    border-top-left-radius: var(--rd-xl);
    border-top-right-radius: var(--rd-xl);
    border-color: var(--c-transparent);
    border-bottom: 1px solid #d2d4dc;
}

.modal-title {
    padding: 0 2rem 0 0;
}

.modal-header .modal-close {
    z-index: 999;
    opacity: 1;
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.modal-header .btn-close {
    opacity: 1;
    background-image: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    padding: 0;
    border-radius: var(--rd-50);
    background-color: #f54036;
    color: var(--c-white);
    font-size: 18px;
    font-weight: var(--f-w-semibold);
    position: relative;
    transition: all 0.3s;
    box-shadow:
        0px 20px 50px rgba(0, 0, 0, 0.12),
        0px 6px 20px rgba(0, 0, 0, 0.26);
}

.modal-close .btn-close:hover,
.modal-header .btn-close:hover {
    outline: 0;
    opacity: 1;
    color: var(--c-white);
    background-color: #f54036;
}

.modal-body {
    height: 100%;
    padding: 1rem 1.5rem;
}

.modal.fade {
    overflow: hidden;
}

.modal.fade .modal-dialog {
    /* transition: transform 0.5s ease-in-out, filter 1s ease-out; */
    filter: blur(5px);
    transform: scale(1.2);
    opacity: 0;
    transition:
        transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.fade.show .modal-dialog {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
}

.modal-footer {
    border-top: 0.0625rem solid rgb(222, 226, 230);
    padding: 1rem;
    /*border: 0;*/
    text-align: center;
}

.modal-footer > * {
    margin: 0;
}

/*====================================== SECTION COMPONENT BUTTON ======================================*/

.btn {
    --bg-y: 100%;
    --r1: 50%;
    --r2: 50%;
    --r3: 0%;
    --r4: 0%;
    overflow: hidden;
    position: relative;
    border-radius: var(--rd-lg);
    outline: none;
    padding: 0.625rem 1rem;
    font-weight: var(--f-w-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    isolation: isolate;
    will-change: transform;
}

.btn:focus-visible {
    outline: none;
}

.btn:focus {
    background-color: var(--c-primary);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-secondary);
    transform: translateY(var(--bg-y));
    z-index: 0;
    will-change: transform;
}

.btn .hover-layer i {
    display: block;
    transition: none !important;
}

.btn .hover-layer,
.btn .hover-layer * {
    transition: none !important;
}

.btn-primary {
    background: var(--c-primary);
    color: var(--c-white);
    border: 1px solid var(--c-white);
}

.btn-secondary {
    background: var(--c-transparent);
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

.btn-secondary:hover {
    background-color: var(--c-transparent);
    border-color: var(--c-primary);
}

.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--c-transparent);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.btn-secondary span {
    color: var(--c-white);
}

.btn-tertiary {
    background: var(--c-white);
    color: var(--c-primary);
    border: 1px solid var(--c-white);
}

.btn-tertiary:focus,
.btn-tertiary:active {
    color: var(--c-white);
}

.hover-layer {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0;
    /* transform: translateY(100%); */
    /* start di bawah */
    pointer-events: none;
    z-index: 7;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.btn-check:focus + .btn,
.btn:focus,
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-check:active + .btn-secondary:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: none !important;
}

.btn-link {
    background-color: var(--c-primary);
    color: var(--c-white);
    text-decoration: underline;
}

.btn-icon-r {
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: var(--c-primary);
    border-radius: var(--rd-50);
    color: var(--c-white);
    transition: all 0.3s;
}

.btn-icon-r:hover {
    color: var(--c-white) !important;
}

.btn-transparent {
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    transition: all 0.3s;
}

.btn-transparent:hover {
    color: var(--c-white);
    background-color: var(--c-primary);
}

.btn-link:hover,
.btn-link:active,
.btn-link:focus {
    background-color: var(--c-transparent);
    color: var(--c-primary);
    text-decoration: underline;
}

.btn-load {
    color: var(--c-secondary);
}

.btn-load:before,
.btn-load:active,
.btn-load:focus {
    background-color: var(--c-secondary) !important;
}

.underline-cta {
    opacity: 0.4;
    width: 100%;
    height: 2px;
    background: transparent linear-gradient(90deg, #ee85ff 0%, #1eadc3 100%) 0%
        0% no-repeat padding-box;
    opacity: 1;
}

.btn-google {
    border: 1px solid #e7e7e9;
    background-color: var(--c-white) !important;
    color: var(--c-black) !important;
}

.btn-google:hover {
    color: var(--c-black) !important;
    border-color: #dbdbde !important;
    box-shadow: none !important;
}

.btn-fb {
    background-color: #4267b2;
    color: var(--c-white) !important;
}

.btn-fb:hover {
    box-shadow: none !important;
}

.wa-bg {
    background-color: #25d366;
}

.btn-modal {
    background-color: var(--c-transparent);
    border: 0;
    padding: 0 !important;
    box-shadow: none;
}

#select-dropdown {
    margin-top: 0.25rem;
    background: transparent;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    outline: 0;
    display: block;
    text-align: left;
    font-size: 1rem;
    width: 100%;
    color: #5a5957;
    text-decoration: none;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 1;
    -webkit-transform-origin: right top;
    transform-origin: right top;
}

#select-dropdown.open {
    opacity: 0;
}

.button-group {
    position: relative;
    width: 13.5rem;
}

.button-group .marka {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 9999;
}

.button-group .marka i {
    background: grey !important;
}

.marka-icon-times {
    border: 1px solid grey;
    border-radius: 50%;
    top: 0.25rem !important;
    right: 0.25rem !important;
}

#dropdown-menu {
    position: absolute;
    top: -1rem;
    right: 0;
    left: 0;
    margin: 1rem auto;
    padding: 0.5rem 1rem;
    width: 100%;
    list-style: none;
    text-align: left;
    border-radius: 0.25rem;
    background: var(--c-white);
    transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transition: box-shadow 0.5s ease-out;
    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.18);
}

#dropdown-menu li {
    position: relative;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    opacity: 0;
}

#dropdown-menu li:nth-last-child(1) {
    margin-bottom: 0;
}

#dropdown-menu li:hover {
    background-color: #33b8c41a;
}

#dropdown-menu li a {
    color: #5a5957;
    text-decoration: none;
    font-size: 1rem;
}

#dropdown-menu.open {
    -webkit-transform: scale(1);
    transform: scale(1);
}

#dropdown-menu.open li {
    transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.open li:nth-child(1) {
    transition-delay: 0.07s !important;
}

.open li:nth-child(2) {
    transition-delay: 0.14s !important;
}

.open li:nth-child(3) {
    transition-delay: 0.21s !important;
}

.open li:nth-child(4) {
    transition-delay: 0.28s !important;
}

.open li:nth-child(5) {
    transition-delay: 0.35s !important;
}

/*====================================== SECTION COMPONENT WORDING ======================================*/
.sc-main {
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--c-black);
    transition: all 0.3s;
}

.sc-xxl {
    font-size: 6.25rem !important;
}

.sc-xl {
    font-size: 1.5rem !important;
}

.sc-l {
    font-size: 1.375rem !important;
}

.sc-m {
    font-size: 1.125rem !important;
    font-weight: 300;
}

.sc-s {
    font-size: 1rem !important;
}

.sc-s-light {
    font-size: 1rem !important;
    font-weight: 300 !important;
}

.sc-sm {
    font-size: 0.875rem !important;
    line-height: 1.4;
}

.sc-xs {
    font-size: 0.75rem !important;
}

span.sc-xs {
    font-weight: 400;
}

.sta-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sc-break {
    white-space: normal;
    word-wrap: break-word;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-3 {
    letter-spacing: 3px;
}

.c-small {
    font-size: 0.625rem;
    line-height: 1.5;
}

.c-title,
footer .footer-list .c-title span {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
}

.c-primary {
    color: var(--c-primary) !important;
}

.c-secondary {
    color: var(--c-secondary) !important;
}

.c-tertiary {
    color: var(--c-tertiary) !important;
}

.c-white {
    color: var(--c-white) !important;
}

.c-black {
    color: var(--c-black) !important;
}

.c-menu {
    color: var(--c-menu) !important;
}

.c-label {
    color: var(--c-label) !important;
}

.c-info {
    color: var(--c-info) !important;
}

.c-primary-20 {
    color: var(--c-primary-20) !important;
}

.c-red {
    color: var(--c-red) !important;
}

.c-grey {
    color: var(--c-grey) !important;
}

.c-border {
    color: var(--c-border) !important;
}

.c-green {
    color: var(--c-y-green) !important;
}

.c-card {
    color: var(--c-card) !important;
}

.bg-card {
    background-color: var(--c-card) !important;
}

.bg-body {
    background-color: var(--c-body) !important;
}

.c-wa {
    color: var(--c-wa) !important;
}

.f-head {
    font-family: var(--f-heading);
}

.f-body {
    font-family: var(--f-body);
}

.f-xxxl {
    font-size: 3.75rem !important;
}

.f-xxl {
    font-size: 3rem !important;
}

.f-xl {
    font-size: 2.5rem !important;
}

.f-lg {
    font-size: 2rem !important;
}

.f-sl {
    font-size: 1.5625rem !important;
}

.f-md {
    font-size: 1.25rem !important;
}

.f-base {
    font-size: 1rem !important;
}

.f-sm {
    font-size: 0.875rem !important;
}

.f-xs {
    font-size: 0.75rem !important;
}

.f-xxs {
    font-size: 0.5rem !important;
}

.light {
    font-weight: var(--f-w-light) !important;
}

.regular {
    font-weight: var(--f-w-regular) !important;
}

.medium {
    font-weight: var(--f-w-medium) !important;
}

.semi-bold {
    font-weight: var(--f-w-semibold) !important;
}

.bold {
    font-weight: var(--f-w-bold) !important;
}

.x-bold {
    font-weight: var(--f-w-xbold) !important;
    /* letter-spacing: 1; */
}

.xx-bold {
    font-weight: var(--f-w-xxbold);
}

.lh-0-8 {
    list-style: 0.8;
}

.lh-0-7 {
    list-style: 0.7;
}

.lh-0-6 {
    line-height: 0.6;
}

.lh-0-5 {
    line-height: 0.5;
}

.lh-1 {
    line-height: 1;
}

.lh-1-1 {
    line-height: 1.1;
}

.lh-1-2 {
    line-height: 1.2;
}

.lh-1-3 {
    line-height: 1.3;
}

.lh-1-4 {
    line-height: 1.4;
}

.lh-1-5 {
    line-height: 1.5;
}

.box-shadow {
    -webkit-transition: box-shadow 0.5s ease-out;
    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.5s ease-out;
}

.no-pad {
    padding: 0;
}

.rd-none {
    border-radius: var(--rd-none) !important;
}

.rd-sm {
    border-radius: var(--rd-sm) !important;
}

.rd-md {
    border-radius: var(--rd-md) !important;
}

.rd-lg {
    border-radius: var(--rd-lg) !important;
}

.rd-xl {
    border-radius: var(--rd-xl) !important;
}

.rd-xxl {
    border-radius: var(--rd-xxl) !important;
}

.rd-xxxl {
    border-radius: var(--rd-xxxl) !important;
}

.rd-50 {
    border-radius: var(--rd-50) !important;
}

.rdtl-rdtr {
    border-top-left-radius: var(--rd-xl) !important;
    border-top-right-radius: var(--rd-xl) !important;
}

.rdbl-rdbr {
    border-bottom-left-radius: var(--rd-xl) !important;
    border-bottom-right-radius: var(--rd-xl) !important;
}

.rdtr-rdbr {
    border-top-right-radius: var(--rd-xl) !important;
    border-bottom-right-radius: var(--rd-xl) !important;
}

.br-primary {
    border-color: var(--c-primary);
}

.br-red {
    border-color: var(--c-red);
}

.br-dark {
    border-color: var(--c-border);
}

.no-transform {
    text-transform: none !important;
}

.bg-primary {
    background-color: var(--c-primary) !important;
}

.bg-primary-gd {
    background: var(--primary-gd) !important;
}

.bg-secondary {
    background-color: var(--c-secondary) !important;
}

.bg-white {
    background-color: var(--c-white) !important;
}

.bg-grey {
    background-color: var(--c-grey) !important;
}

.bg-black {
    background-color: var(--c-black) !important;
}

.bg-red {
    background-color: var(--c-red) !important;
}

.bg-transparent {
    background-color: var(--c-transparent) !important;
}

.bg-wa {
    background-color: #25d366 !important;
}

.bg-fb {
    background-color: #4267b2 !important;
}

.c-whatsapp {
    color: #25d366 !important;
}

.w-fit {
    width: fit-content;
}

.h-fit {
    height: fit-content;
}

.max-16 {
    max-width: 1rem !important;
}

.max-24 {
    max-width: 1.5rem !important;
}

.max-32 {
    max-width: 2rem !important;
}

.max-40 {
    max-width: 2.5rem !important;
}

.max-48 {
    max-width: 3rem !important;
}

.max-64 {
    max-width: 4rem !important;
}

.max-84 {
    max-width: 5.25rem !important;
}

.max-100 {
    max-width: 6.25rem !important;
}

.max-112 {
    max-width: 7rem !important;
}

.max-128 {
    max-width: 8rem !important;
}

.max-140 {
    max-width: 8.75rem !important;
}

.max-160 {
    max-width: 10rem !important;
}

.max-240 {
    max-width: 15rem !important;
}

.max-280 {
    max-width: 17.5rem !important;
}

.max-320 {
    max-width: 20rem !important;
}

.max-360 {
    max-width: 22.5rem !important;
}

.max-400 {
    max-width: 25rem !important;
}

.max-480 {
    max-width: 30rem !important;
}

.max-560 {
    max-width: 35rem !important;
}

.max-640 {
    max-width: 40rem !important;
}

.max-720 {
    max-width: 45rem !important;
}

.max-840 {
    max-width: 52.5rem !important;
}

.max-1024 {
    max-width: 64rem !important;
}

.max-1140 {
    max-width: 71.25rem !important;
}

.z-m-3 {
    z-index: -3;
}

.z-m-2 {
    z-index: -2;
}

.z-m-1 {
    z-index: -1;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.z-4 {
    z-index: 4;
}

.z-5 {
    z-index: 5;
}

.border-color-grey {
    border-color: var(--c-grey) !important;
}

.subject-title {
    max-width: 48rem;
}

.subject-desc,
.subject-info {
    max-width: 64rem;
}

.sticky-subhead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.no-result {
    background-color: var(--c-primary-500);
    padding: 1rem;
    text-align: center;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.cover {
    object-fit: cover;
}

.c-default {
    cursor: default;
}

.pointer {
    cursor: pointer;
}

.no-selection {
    user-select: none;
}

.p-none {
    pointer-events: none;
}

.line-clamp-1 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
}

.line-clamp-2 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
}

.line-clamp-3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
}

.line-clamp-4 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
}

.line-clamp-5 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
}

.wrap-text {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.custom-choose {
    display: flex;
}

.custom-choose input[type="checkbox"],
.custom-choose input[type="radio"] {
    display: none;
}

.custom-choose input[type="checkbox"] + label,
.custom-choose input[type="checkbox"]:not(checked) + label,
.custom-choose input[type="radio"] + label,
.custom-choose input[type="radio"]:not(checked) + label {
    cursor: pointer;
    padding: 12px 32px;
    border: solid 1px var(--c-transparent);
    background-color: var(--c-body);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 16px;
    transition: all ease-in-out 0.3s;
}

.custom-choose input[type="checkbox"]:checked + label,
.custom-choose input[type="radio"]:checked + label {
    position: relative;
    border: solid 1px var(--c-primary);
    background-color: var(--c-body);
    color: var(--c-primary);
    transition: all ease-in-out 0.3s;
}

.faq-accordion .accordion-item .accordion-body :where(ul),
.modalcareer-applicant--body :where(ul),
.pillar-card--surface :where(ul),
.about-intermezo-left--desc :where(ul),
.section-obd-intermezo .about-content--body-desc :where(ul) {
    list-style: disc;
    padding-left: 1rem;
    margin-left: 0;
    list-style-position: outside;
}

.finance-accordion .accordion-item .accordion-body :where(ol),
.modalcareer-applicant--body :where(ol),
.pillar-card--surface :where(ol),
.about-intermezo-left--desc :where(ol),
.section-obd-intermezo .about-content--body-desc :where(ol) {
    list-style: decimal;
    padding-left: 1rem;
    margin-left: 0;
    list-style-position: outside;
}

/*====================================== SECTION NAVBAR ======================================*/
header {
    background-color: var(--c-transparent);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 777;
    will-change: transform;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    transition: all 0.5s;
}

header nav {
    position: relative;
    /* overflow: hidden; */
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--trans-cubic);
}

header nav .container-fluid {
    max-width: 1320px;
    padding: 0;
}

header nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.close-menu {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 85%;
}

.close-menu span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 20px;
    color: #000233;
    text-align: center;
    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.18);
}

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

.container-nav .nav-logo {
    width: 128px;
    flex-shrink: 0;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

select.form-control:has(+ input:focus),
select.form-control:has(+ input:focus-within) {
    opacity: 0;
}

.container-nav .nav-menu {
    /* position: relative; */
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-basis: auto;
    gap: 16px;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
}

.container-nav .nav-menu ul {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    text-align: center;
    margin: 0 auto;
}

.container-nav .nav-menu li a {
    font-size: 16px;
    font-weight: 500;
    padding: 8px;
    color: var(--c-white);
    transition: all 0.3s;
}

.container-nav .nav-menu li a:hover {
    color: var(--c-white) !important;
}

.scroll#navigation {
    background-color: var(--c-primary) !important;
}

.scroll#navigation .container-nav .nav-menu li a:hover {
    color: var(--c-white) !important;
}

.container-nav .nav-menu li.active > a,
.menu-container-mobile .menu-nav-mobile li.active > a {
    color: var(--c-white);
    font-weight: 700;
}

.nav-menu-right {
    margin-left: auto;
}

.nav-toggle {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    display: none;
    z-index: 10;
    position: relative;
    cursor: pointer;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    box-shadow: none;
    border: none;
    background-color: var(--c-transparent);
}

.nav-toggle span {
    display: block;
    opacity: 1;
    width: 20px;
    height: 2px;
    border-radius: 20px;
    background-color: var(--c-primary);
    font-size: 16px;
    transition: var(--trans-cubic);
}

.nav-toggle span:nth-child(2) {
    width: 15px;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(-45deg);
}

.nav-toggle.active span:nth-child(2) {
    transform: translateX(-30px);
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(45deg);
}

.nav-logo .text-logo {
    max-width: 120px;
}

.nav-submenu-wrapper {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.nav-submenu-wrapper a span {
    color: var(--c-primary);
}

.nav-item-what-we-do.show-submenu .nav-submenu-wrapper {
    display: block;
}

.nav-item-what-we-do.show-submenu.animate-submenu .nav-submenu-wrapper {
    flex-direction: column;
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
    top: 3.5rem;
}

.nav-item-mobile-accordion .accordion-item,
.nav-item-mobile-accordion .accordion-collapse {
    border-bottom-right-radius: 0rem !important;
    border-bottom-left-radius: 0rem !important;
    border-top-left-radius: 0rem !important;
    border-top-right-radius: 0rem !important;
}

.nav-submenu-wrapper .nav-submenu-content {
    text-align: left;
    background-color: var(--c-white);
    padding: 1rem 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-submenu-wrapper .nav-submenu-content a.active {
    color: var(--c-primary);
    font-weight: 700;
}

.nav-item-mobile-accordion.active .accordion-button {
    font-weight: 700;
}

.nav-item-mobile-accordion .accordion-button {
    padding: 0rem !important;
    box-shadow: unset !important;
}

.menu-container-mobile .menu-nav-mobile li:last-child {
    margin-bottom: 0;
}

.nav-link-main {
    cursor: default;
}

.nav-menu .menu-nav {
    display: block;
}

.nav-hamburger {
    display: none;
    width: auto;
    height: auto;
    flex-direction: column;
    gap: 6px;
}

.nav-hamburger span.bar {
    display: block;
    background-color: var(--c-white);
    height: 2px;
    border-radius: var(--rd-xl);
}

.nav-hamburger .bar-top,
.nav-hamburger .bar-bot {
    width: 16px;
}

.nav-hamburger .bar-top {
    transition: all 0.6s ease;
    transition-delay: 0.2s;
}

.nav-hamburger .bar-middle {
    transition: all 0.6s ease;
    transition-delay: 0.3s;
}

.nav-hamburger .bar-bot {
    transition: all 0.8s ease;
    transition-delay: 0.1s;
}

.nav-hamburger .bar-middle {
    width: 24px;
}

/* === ACTIVE STATE === */
.nav-hamburger.active .bar-top {
    width: 24px;
    transform: rotate(45deg) translate(7px, 9px);
}

.nav-hamburger.active .bar-middle {
    width: 24px;
    transform: rotate(-45deg) translate(-3px, 1px) translateX(0px);
}

.nav-hamburger.active .bar-bot {
    filter: blur(4px);
    -webkit-filter: blur(4px);
    transform: scale(2) translate(-1px, -4px);
    height: 8px;
    /* border-radius: 50%; */
    opacity: 0.4;
}

.language-toggle {
    width: 80px;
    height: 40px;
    background-color: #e6edf6;
    border-radius: var(--rd-md);
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.language-toggle span {
    z-index: 2;
    font-weight: 500;
    color: black;
    transition: color 0.3s ease;
}

.toggle-circle {
    position: absolute;
    width: 32px;
    height: 32px;
    background: var(--c-white);
    border-radius: var(--rd-sm);
    top: 4px;
    left: 4px;
    transform: translateX(0);
    transition: transform 0.3s ease;
    z-index: 1;
}

.language-toggle.en-active .toggle-circle {
    transform: translateX(38px);
}

.lang-id-text,
.lang-en-text {
    position: absolute;
    font-size: 14px;
    transition: color 0.3s;
    color: var(--c-black);
}

.lang-id-text {
    left: 12px;
}

.lang-en-text {
    right: 12px;
}

.lang-id-text.active,
.lang-en-text.active {
    color: var(--c-primary);
    font-weight: 700 !important;
}

.menu-container-mobile {
    z-index: 480;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    height: 0;
    width: 100%;
    position: fixed;
    background-color: white;
    box-shadow: -4px 0px 18px 4px rgb(0 0 0 / 14%);
    bottom: 0;
    right: 0;
}

.btn-back {
    position: absolute;
    top: 25px;
    margin-left: 12px;
    padding: 0;
    opacity: 0.5;
    background: none;
    border: none;
    color: var(--c-black);
    font-size: 16px;
    cursor: pointer;
    z-index: 20;
}

.btn-back:focus {
    outline: none;
}

/* Component */
@media only screen and (min-width: 1025px) and (max-width: 1225px) {
    .container-nav .nav-menu li a {
        font-size: 16px;
    }
}

.cursor-none {
    cursor: default !important;
}

.pointer-none {
    pointer-events: none !important;
}

.swiper {
    overflow: clip;
}

.swiper-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.cta-swiper-wrapper {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
}

.swiper-slide {
    background: transparent;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-wrapper .swiper-slide > a {
    width: 100%;
}

.swiper-button-next {
    opacity: 1;
    right: 0px;
    padding: 18px;
    border-radius: 50%;
    /* box-shadow: 0px 0px 10px 0px hsl(0deg 0% 0% / 25%); */
}

.swiper-button-prev {
    opacity: 1;
    left: 0px;
    padding: 18px;
    border-radius: 50%;
    /* box-shadow: 0px 0px 10px 0px hsl(0deg 0% 0% / 25%); */
}

.swiper-button-next,
.swiper-button-prev {
    position: static;
    top: 45%;
    width: 2rem !important;
    height: 2rem !important;
    color: var(--c-black);
    border: 1px solid var(--c-black);
    background-color: var(--c-transparent);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    transition: all 0.3s;
}

.swiper-button-next span,
.swiper-button-next i,
.swiper-button-prev span,
.swiper-button-prev i {
    transition: all 0s !important;
    line-height: normal !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    /* transform: scale(1.1); */
    background-color: var(--c-black);
    color: var(--c-white);
}

.swiper-button-prev:after,
.swiper-button-next:after {
    opacity: 0;
    display: none;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0.2;
}

.swiper-button-next.br-white,
.swiper-button-prev.br-white {
    top: 45%;
    width: 2rem !important;
    height: 2rem !important;
    color: var(--c-white);
    border: 1px solid var(--c-white);
    background-color: var(--c-transparent);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    transition: all 0.3s;
}

.cta-swiper-home .swiper-bp-prev,
.cta-swiper-home .swiper-home-services-prev {
    left: 0;
}

.cta-swiper-home .swiper-bp-next,
.cta-swiper-home .swiper-home-services-next {
    right: 0;
}

.swiper-button-prev.br-white:hover,
.swiper-button-next.br-white:hover {
    /* transform: scale(1.1); */
    background-color: var(--c-white);
    color: var(--c-black);
}

.section-career-testimoni
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--c-white);
    opacity: 1;
}

.bullet-wrapper.bullet-filled .swiper-pagination-bullet {
    border: 2px solid var(--c-transparent);
    background: var(--c-primary);
    opacity: 1;
}

.clipped-path {
    padding: 5px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 1s;
}

.outline-font {
    color: rgba(170, 49, 250, 1);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px var(--c-primary);
}

.outline-font.outline-green {
    color: rgba(117, 231, 248, 1);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--c-secondary);
}

section {
    margin: 0 auto;
    padding: 2rem 0;
}

.section-hero-top {
    padding-top: 8rem;
}

.container-fluid {
    margin: 0 auto;
}

.section-hero {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.section-hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    background-image: linear-gradient(180deg, #202833 0%, #1f1f219e 100%);
    opacity: 0.8;
    transition:
        background 0.3s,
        border-radius 0.3s,
        opacity 0.3s;
}

/*====================================== SECTION COMPONENT ELEMENT ======================================*/
.hero-container {
    padding: 10rem 0 5rem 0;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 35rem;
    /* height: 40dvh; */
}

.hero-container::before {
    /* display: none; */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #194495;
    background: linear-gradient(
        148deg,
        rgba(25, 68, 149, 1) 0%,
        rgba(54, 97, 166, 0.9) 30%,
        rgb(255 255 255 / 15%) 60%,
        rgba(255, 255, 255, 0) 100%
    );
}

.hero-container::after {
    /* display: none; */
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 240px;
    background: #f5f9fd;
    background: linear-gradient(
        0deg,
        rgba(245, 249, 253, 1) 5%,
        rgba(255, 255, 255, 0) 100%
    );
}

.hero-ornament {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 320px;
    height: 320px;
    background-image: url("../images/general/graph-hais-hero.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
}

.breadcrumb-wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-base);
    white-space: nowrap;
    overflow: hidden;
}

.breadcrumb-list li {
    min-width: 0;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: #ced9ea;
    font-weight: var(--f-w-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb-list li + li::before {
    content: "/";
    margin: 0 8px;
    color: #9db5d4;
}

.breadcrumb-list a {
    text-decoration: none;
    color: #9db5d4;
    font-weight: var(--f-w-medium);
}

.breadcrumb-list a:hover {
    text-decoration: underline;
}

.breadcrumb-list li[aria-current="page"] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.text-animate-wrap {
    padding: 5px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 1s;
}

.text-animate {
    perspective: 500px;
}

.about-content--head-desc {
    max-width: 75%;
}

[id^="section-"] {
    scroll-margin-top: 80px;
}

.menu-sidebar-mobile {
    display: none;
}

.menu-sidebar {
    position: sticky;
    top: 100px;
    background-color: var(--c-white);
    padding: 1rem 0.5rem;
    border-radius: var(--rd-lg);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.menu-sidebar--ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-sidebar--nav .menu-sidebar--link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rd-lg);
    font-weight: var(--f-w-semibold);
    color: var(--c-menu);
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

.menu-sidebar--nav .menu-sidebar--icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.menu-sidebar--list:hover .menu-sidebar--link {
    color: var(--c-primary);
}

.menu-sidebar--list.active .menu-sidebar--link {
    background-color: var(--c-tertiary);
    color: var(--c-primary);
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 14px 16px;
    border-radius: 16px;
    text-decoration: none;
    background: #e5f0ff;
    color: #164194;
    font-weight: 600;
}

.chev {
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease;
}

.menu-sidebar--list.is-open .chev {
    transform: rotate(180deg);
}

.menu-sidebar--toggle {
    outline: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    overflow: hidden;
    background: var(--c-white);
    cursor: pointer;
    text-decoration: none;
    color: var(--c-menu);
    font-weight: var(--f-w-semibold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rd-lg);
    transition: all 0.3s;
}

.menu-sidebar--list.is-open .menu-sidebar--toggle {
    background-color: #edf5fe;
    color: var(--c-primary);
}

.menu-sidebar--submenu > li.submenu-sidebar--list .submenu-link {
    list-style: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: var(--rd-lg);
    /* font-weight: var(--f-w-semibold); */
    color: var(--c-menu);
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

.menu-sidebar--toggle:hover,
.menu-sidebar--submenu > li.submenu-sidebar--list .submenu-link:hover,
.menu-sidebar--submenu > li.submenu-sidebar--list.active .submenu-link {
    color: var(--c-primary);
}

.menu-sidebar--submenu > li.submenu-sidebar--list.active .submenu-link {
    background-color: var(--c-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .chev {
        transition: none;
    }
}

.nav-primary {
    padding: 0.25rem;
}

.nav-primary .nav-pills {
    gap: 0.5rem;
    width: fit-content;
    padding: 0.25rem;
    margin-left: 0;
    border-radius: var(--rd-xxl);
    justify-content: center;
    background-color: rgb(246 246 246);
}

.nav-primary li.nav-item {
    background-color: rgb(246 246 246);
    border-radius: var(--rd-xxl);
}

.nav-primary li.nav-item .nav-link {
    color: var(--c-info);
    border: 1px solid var(--c-transparent);
    border-radius: var(--rd-xl);
    padding: 0.5rem 1rem;
    font-weight: var(--f-w-medium);
    transition: all 0.3s;
}

.nav-primary .nav-pills .nav-link.active,
.nav-primary .nav-pills .show > .nav-link {
    background-color: var(--c-primary);
    font-weight: var(--f-w-semibold);
}

.nav-primary .nav-pills .nav-link.active {
    color: var(--c-white);
    padding: 0.5rem 1.5rem;
}

.nav-primary .nav-pills .nav-link.active:focus,
.nav-primary .nav-pills .nav-link.active:hover,
.nav-primary .nav-pills .nav-link.active:active,
.nav-primary .nav-pills .nav-link.active:target {
    color: var(--c-white) !important;
}

.nav-secondary {
    padding: 0.25rem;
    width: fit-content;
    margin: 0 auto;
    background-color: #e5edf6;
    border-radius: var(--rd-xxl);
}

.nav-secondary .nav-pills {
    width: fit-content;
    display: flex;
    gap: 1rem;
    justify-content: start;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0.5rem;
    border-radius: var(--rd-xxl);
    background-color: #e5edf6;
}

.nav-secondary .nav-pills:active {
    cursor: grabbing;
}

.nav-secondary .nav-pills::-webkit-scrollbar {
    display: none;
}

.nav-secondary li.nav-item {
    background-color: #e5edf6;
    border-radius: var(--rd-xxl);
}

.nav-secondary li.nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--c-menu);
    border: 1px solid var(--c-transparent);
    border-radius: var(--rd-xl);
    padding: 0.75rem 1rem;
    font-weight: var(--f-w-semibold);
    box-shadow: 0 0 0 rgba(22, 65, 148, 0);
    transition: all 0.3s;
}

.nav-secondary li.nav-item,
.nav-secondary .nav-pills .nav-link {
    flex-shrink: 0;
}

.nav-secondary li.nav-item .nav-link .nav-item--icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: all 0.3s;
}

.nav-secondary .nav-pills .nav-link.active,
.nav-secondary .nav-pills .show > .nav-link {
    background-color: var(--c-white);
    font-weight: var(--f-w-semibold);
}

.nav-secondary .nav-pills .nav-link.active {
    color: var(--c-primary);
    transform: scale(1.025);
    box-shadow:
        0 1px 16px rgba(22, 65, 148, 0.1),
        0 1px 32px rgba(22, 65, 148, 0.01);
}

.nav-secondary .nav-pills .nav-link.active .nav-item--icon {
    transform: scale(1.1);
}

.nav-secondary .nav-pills .nav-link.active:focus,
.nav-secondary .nav-pills .nav-link.active:hover,
.nav-secondary .nav-pills .nav-link.active:active,
.nav-secondary .nav-pills .nav-link.active:target {
    color: var(--c-primary) !important;
}

/*====================================== SECTION HOME PAGE ======================================*/
section.section-hero-home {
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 0;
    overflow: hidden;
    content-visibility: visible;
}

.section-hero-home.is-animating .hero-home--map,
.section-hero-home.is-animating .hero-home--wrapper {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.hero-home {
    z-index: 9;
    position: relative;
    z-index: 2;
    padding: 5.5rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    height: 100svh;
}

.hero-home--gradient {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(22 65 148 / 1%) 30%, #164194 100%);
}

.hero-home--wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin-top: auto;
    gap: 10rem;
}

.hero-home--wrapper .hero-home--welcome {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 720px;
    width: 100%;
}

.home-map--image {
    width: 100%;
    height: 100%;
}

.home-map--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

.section-gradient-trans {
    width: 100%;
    height: 48px;
    background: #ffffff;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 249, 253, 1) 100%
    );
}

section.section-home-about {
    background-color: var(--c-white);
}

.home-about--thumbnail {
    position: relative;
    height: 640px;
    margin-top: -80px;
}

.home-about--thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
}

.home-about--cta {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.home-about--cta .btn-icon-r {
    width: 64px;
    height: 64px;
    box-shadow:
        0px 20px 50px rgba(0, 0, 0, 0.12),
        0px 6px 20px rgba(0, 0, 0, 0.26);
}

.home-about--cta:hover .btn-icon-r {
    transform: scale(1.1);
}

.home-about--modal {
    width: 100%;
    height: 32rem;
}

section.section-home-services {
    margin-top: -16px;
}

.services-home--container {
    position: relative;
    height: 1600px;
    overflow: clip;
    padding: 10rem 1rem 5rem 1rem;
}

.services-home--head > * {
    color: #a9bedd !important;
}

.services-home--bg {
    background-image: url("../images/home-service-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom left;

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* full bleed */
    object-position: center;
    z-index: -2;
}

.services-home--bg .services-home--vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.services-home--body {
    width: 100%;
    height: 100%;
    margin: 5rem 0;
}

.services-home--article {
    position: absolute;
    max-width: 22.5rem;
    width: 100%;
}

.services-home--article:nth-child(1) {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.services-home--article:nth-child(2) {
    top: 20%;
    left: 5%;
}

.services-home--article:nth-child(3) {
    top: 30%;
    right: 7%;
}

.services-home--article:nth-child(4) {
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
}

.services-home--ship {
    width: 100%;
}

.services-home--ship .image {
    max-width: 84px;
    margin: 0 auto;
}

.services-home--card {
    overflow: hidden;
    position: relative;
    background-color: var(--c-white);
    border-radius: var(--rd-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1rem;
    width: 100%;
    height: 480px;
}

.services-home--card::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--rd-lg);
    background: #ffffff;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgb(255 255 255) 50%,
        rgba(255, 255, 255, 1) 100%
    );
}

.services-home--ornament {
    z-index: 2;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6rem;
    height: 6rem;
    pointer-events: none;
    user-select: none;
}

.services-home--info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.services-home--title {
    padding-right: 0.75rem;
}

.services-home--image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--rd-xl);
    pointer-events: none;
    user-select: none;
}

.hero-home--stock {
    height: 204px;
    width: 480px;
    background-color: var(--c-white);
    border-radius: var(--rd-xxl);
    overflow: hidden;
}

.hero-home--gradient,
.hero-home--wrapper,
.hero-home--sea {
    will-change: transform, opacity, filter;
}

.hero-home--wrapper,
.hero-home--sea,
.hero-home--gradient {
    contain: layout paint;
}

.swiper-hero {
    height: auto !important;
    width: fit-content;
    overflow: hidden;
    max-height: 204px;
}

.cta-swiper--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.cta-swiper--hero .swiper-hero-prev,
.cta-swiper--hero .swiper-hero-next {
    width: 3rem !important;
    height: 3rem !important;
    background-color: var(--c-white);
    color: var(--c-primary);
    border-color: var(--c-white);
    transform: rotate(90deg);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    transition: all 0.6s;
}

.is-locked {
    pointer-events: none;
    transition: all 0.6s;
}

.hero-home--sea {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25vh;
    background: linear-gradient(
        0deg,
        rgba(245, 249, 253, 1) 5%,
        rgba(255, 255, 255, 0) 100%
    );
}

.hero-home--media .cta-swiper-wrapper {
    max-width: 7rem;
}

.hero-home--media .article--label {
    display: flex;
    gap: 0.25rem;
}

.home-sol-card.career-highlight {
    padding: 24px;
    min-height: 15rem;
}

.home-sol-card.career-highlight::before {
    background: linear-gradient(0deg, rgba(22, 65, 148, 0) 0.18%, #164194 80%);
}

.hero-home--gradient {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(22 65 148 / 1%) 20%, #164194 100%);
}

.hero-home--gradient-bot {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgb(22 65 148 / 1%) 70% 34%,
        #f5f9fd 100%
    );
}

.home-solution--body {
    position: relative;
    width: 100%;
}

.home-solution-center {
    position: relative;
}

.home-solution-ornament {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8396c7 0%, #c2c8d221 100%);
    z-index: 2;
}

.home-solution-ornament-pulse {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: linear-gradient(180deg, #274078 0%, #d7d8dc 100%);
    z-index: 1;
    opacity: 0;
}

.hero-home--map {
    position: relative;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    scale: 2;
    transform: translate(-110px, -530px);
}

.hero-home--ornament {
    position: absolute;
    top: 67%;
    max-width: 72px;
    right: 310px;
}

.section-intermezo--container {
    opacity: 0;
    position: absolute;
    width: 100%;
    inset: 104px auto 0 auto;
    /* z-index: 4; */
    pointer-events: none;
}

.section-intermezo--container .section-intermezo--wrapper {
    pointer-events: auto;
    width: 100%;
    top: 16px;
    display: flex;
    gap: 3rem;
}

.section-intermezo--body {
    display: flex;
    gap: 2rem;
}

.intermezo-ship {
    width: 16px;
    height: auto;
    position: absolute;
    top: 69.5%;
    left: 81%;
    transform: translate(-50%, -50%);
}

.home-stock {
    position: relative;
    padding: 5rem 3rem;
    border-radius: var(--rd-xxxl);
    max-width: 80%;
}

.home-stock::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        270deg,
        rgba(22, 65, 148, 0) 0%,
        rgba(22, 65, 148, 1) 100%
    );
    border-radius: var(--rd-xxxl);
}

.home-stock--desc {
    max-width: 80%;
}

.home-stock--chart {
    top: 0%;
    right: -25%;
    transform: translate(0%, 55%);
    max-width: 400px;
    width: 100%;
    height: 180px;
    background-color: var(--c-white);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    border-radius: var(--rd-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-home-news.swiper {
    overflow: visible;
}

.swiper-home-news .swiper-slide {
    /* width: var(--slide-w, 240px); */
    width: 25vw;
    transition: all 0.8s ease;
}

.swiper-home-news .swiper-slide:not(.swiper-slide-active) {
    /* --slide-w: clamp(220px, 30vw, 360px); */
    width: 25vw;
    /* transform: scale(.96); */
}

.swiper-home-news .swiper-slide-active {
    /* --slide-w: clamp(280px, 72vw, 720px); */
    width: 50vw;
    /* transform: scale(1); */
}

.cta-swiper-home-news {
    position: absolute;
    top: 45%;
    padding: 0 1rem;
}

.cta-swiper-home-news .swiper-button-prev,
.cta-swiper-home-news .swiper-button-next,
.cta-swiper-tl-gallery .swiper-button-prev,
.cta-swiper-tl-gallery .swiper-button-next,
.cta-swiper-home-awards .swiper-button-prev,
.cta-swiper-home-awards .swiper-button-next {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    width: 3rem !important;
    height: 3rem !important;
}

.home-news--image {
    height: 480px;
    position: relative;
    overflow: hidden;
}

.home-news--thumbnail .home-news--desc {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1.5rem 1.5rem;
    transition: all 0.5s;
}

.home-news--image::before {
    z-index: 1;
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(22, 65, 148, 0) 35.31%,
        #164194 100%
    );
    border-radius: var(--rd-lg);
    transition: all 0.5s ease-out;
}

.home-news--thumbnail:hover .home-news--image::before {
    opacity: 0.6;
}

.swiper-home-news
    .swiper-slide:not(.swiper-slide-active)
    .home-news--image::before {
    background: linear-gradient(
        180deg,
        rgb(17 18 19 / 40%) 35.31%,
        #164194 100%
    );
}

.swiper-home-news
    .swiper-slide:not(.swiper-slide-active)
    .home-news--thumbnail
    .home-news--desc {
    opacity: 0.6;
}

.swiper-home-news
    .swiper-slide:not(.swiper-slide-active)
    .home-news--thumbnail:hover
    .home-news--desc,
.home-news--thumbnail:hover .home-news--desc {
    opacity: 1;
}

.home-news--thumbnail a:hover:before {
    transform: scale(2) translateY(-48px);
}

.home-news--thumbnail .home-news--image img {
    transition: transform 1.5s ease-out;
}

.home-news--thumbnail:hover .home-news--image img {
    transform: scale(1.25);
    transition: transform 5s ease-out;
}

.home-news--thumbnail .article--label {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.article--label {
    display: flex;
    gap: 0.25rem;
}

.article--label span {
    text-align: center;
}

.section-home-solution {
    position: relative;
    background-color: var(--c-white);
    margin-top: -2rem;
}

.home-usp {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 4rem 3rem;
    border-radius: var(--rd-xxl);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.home-usp .home-usp--wrapper {
    max-width: 50%;
}

.home-usp--ornament {
    position: absolute;
    bottom: 0;
    right: -104px;
}

.home-usp--ornament .image {
    max-width: 840px;
    width: 100%;
}

.home-usp--logo {
    position: absolute;
    bottom: -32px;
    right: -24px;
}

.home-usp--logo .image {
    max-width: 240px;
    width: 100%;
}

.swiper-home-awards .award-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.swiper-home-awards .award-list .awards-list--image {
    height: 16.25rem;
    background-color: rgba(206, 217, 234, 0.25);
    padding: 2rem 1rem;
}

.swiper-home-awards .award-list .awards-list--desc {
    padding: 0 1rem;
}

/*====================================== SECTION TENTANG KAMI ======================================*/
.section-about-intermezo {
    background-size: contain;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: center left -204px;
}

.section-about-intermezo .about-intermezo-left .about-intermezo-left--title h2 {
    min-width: 6.125rem;
}

.about-intermezo-left--desc li:has(strong)::marker,
.about-intermezo-left--desc li:has(b)::marker {
    font-weight: 700;
    font-size: 1.25rem;
}

.corval-list-wrapper {
    gap: 2rem;
}

.corval-list {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.corval-list .corval-list--header {
    padding: 1rem;
    text-align: center;
    background-color: #8e5243;
}

.corval-1 .corval-list--header,
.corval-2 .corval-list--header,
.corval-3 .corval-list--header {
    border-radius: 8px 8px 8px 50px;
}

.corval-5 .corval-list--header,
.corval-6 .corval-list--header,
.corval-7 .corval-list--header {
    border-radius: 8px 8px 50px 8px;
}

.corval-1 .corval-list--body p,
.corval-2 .corval-list--body p,
.corval-3 .corval-list--body p {
    text-align: end;
}

.corval-4 .corval-list--body p {
    text-align: center;
}

.corval-5 .corval-list--body p,
.corval-6 .corval-list--body p,
.corval-7 .corval-list--body p {
    text-align: start;
}

.corval-4 {
    margin-top: auto;
}

.corval-4 .corval-list--header {
    border-radius: 8px 8px 8px 8px;
}

.corval-1 .corval-list--header {
    background-color: #8e5243;
}

.corval-2 .corval-list--header {
    background-color: #82c034;
}

.corval-3 .corval-list--header {
    background-color: #974377;
}

.corval-4 .corval-list--header {
    background-color: #da272c;
}

.corval-5 .corval-list--header {
    background-color: #e77921;
}

.corval-6 .corval-list--header {
    background-color: #d8c512;
}

.corval-7 .corval-list--header {
    background-color: #1891d1;
}

.download-compro-card {
    position: relative;
    overflow: hidden;
    min-height: 14.125rem;
    height: 100%;
    width: 100%;
    padding: 3rem 4rem;
    border-top-left-radius: var(--rd-md);
    border-top-right-radius: var(--rd-md);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../images/download-cta-asset.jpg?v=2.1");
}

.download-compro-card::before {
    content: "";
    opacity: 0.5;
    position: absolute;
    border-top-left-radius: var(--rd-md);
    border-top-right-radius: var(--rd-md);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        270deg,
        rgb(22 65 148 / 30%) 39.32%,
        #164194 100%
    );
    z-index: 2;
    transition: all 0.3s;
}

.download-compro-card:hover::before {
    opacity: 1;
}

.download-compro-card .download-compro-card--link {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 3;
}

.download-compro-card
    .download-compro-card--link
    .download-compro-card--content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
    justify-content: center;
}

.section-about-timeline {
    position: relative;
    z-index: 0;
}

.section-about-timeline .about-timeline-container {
    padding: 6rem 0;
}

.abouttimeline-content .swiper-pagination-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    padding: 1rem 0;
    height: fit-content;
    margin-top: 4rem;
}

.abouttimeline-content .swiper-pagination-wrapper .boat-image {
    position: absolute;
    top: -49px;
    left: 50%;
    transform: scale(2) translateX(-20%);
    width: 125px;
    z-index: 15;
    pointer-events: none;
}

.swiper-about-tl-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 14rem;
    bottom: 41px !important;
    transition: transform 0.5s ease;
}

.swiper-about-tl-pagination .swiper-pagination-bullet {
    width: auto;
    height: auto;
    min-height: 64px;
    border-radius: 0;
    opacity: 1;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    position: relative;
    top: -3.5rem;
    transition: all 0.3s;
}

.swiper-about-tl-pagination .swiper-pagination-bullet.next,
.swiper-about-tl-pagination .swiper-pagination-bullet.prev {
    font-size: 2.5rem;
}

.swiper-about-tl-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--c-primary);
    border: 8px solid rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease;
    z-index: 1;
}

.swiper-about-tl-pagination .swiper-pagination-bullet.next::after,
.swiper-about-tl-pagination .swiper-pagination-bullet.prev::after {
    background-color: var(--c-primary);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.swiper-about-tl-pagination .swiper-pagination-bullet-active {
    color: var(--c-white);
    font-weight: 700;
    opacity: 0;
}

.swiper-about-tl-pagination .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(22, 65, 148, 0.6);
    z-index: 4;
    opacity: 0;
}

.swiper-about-tl-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet::before {
    animation: pulseColor 1.8s infinite ease-in-out;
}

@keyframes pulseColor {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.swiper-about-tl-pagination .swiper-pagination-bullet-active::after {
    background-color: var(--c-white);
}

.swiper-about-tl .cta-swiper-tl {
    position: absolute;
    top: 80px;
    width: 100%;
}

.swiper-about-tl .cta-swiper-tl .swiper-about-tl-prev,
.swiper-about-tl .cta-swiper-tl .swiper-about-tl-next {
    background-color: var(--c-white);
    border: none;
}

.swiper-about-tl .cta-swiper-tl .swiper-about-tl-prev:hover,
.swiper-about-tl .cta-swiper-tl .swiper-about-tl-next:hover,
.cta-swiper-obd-gallery .swiper-obd-gallery-prev:hover,
.cta-swiper-obd-gallery .swiper-obd-gallery-next:hover,
.cta-swiper-tl-gallery .swiper-tl-gallery-prev:hover,
.cta-swiper-tl-gallery .swiper-tl-gallery-next:hover {
    background-color: var(--c-primary);
}

.timeline-about-card {
    width: 100%;
    max-width: 680px;
}

.timeline-about-card .timeline-about-card--head h2 {
    font-size: 12rem;
}

.timeline-about-card .timeline-about-card--body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--c-white);
    border-radius: var(--rd-xxl);
    padding: 2rem 7rem 2rem 2rem;
    margin-top: -1rem;
    position: relative;
    overflow: hidden;
}

.timeline-about-card
    .timeline-about-card--body
    .timeline-about-card--body-ornament {
    max-width: 120px;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

.tl-gradient-text {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 13.75%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.about-timeline-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.abouttimeline-content-wrapper {
    display: flex;
    height: 100%;
    align-items: center;
}

.about-timeline-bg video.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.tl-gallery-card {
    width: 100%;
    height: 100%;
}

.tl-gallery-card .tl-gallery-card--image img {
    max-height: 420px;
}

.cta-swiper {
    position: absolute;
    height: 100%;
    width: 100%;
}

.cta-swiper .cta-swiper-tl-gallery {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.tl-gallery-content .swiper-tl-gallery {
    padding: 0 2rem;
}

.tl-gallery-content .swiper-pagination-wrapper {
    margin: 0 auto;
}

.section-about-organization {
    background-size: contain;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: top -40px left -204px;
}

/*====================================== SECTION TENTANG KAMI - KOMISARIS dan DIREKSI ======================================*/
section.section-bocd {
    background: url("../images/graph-hais-bocd.png");
    background-repeat: no-repeat;
    background-size: 30% auto;
    background-position: top right;
}

.bocd-card {
    width: 100%;
    position: relative;
    border-radius: var(--rd-xxl);
    /* box-shadow: 0 8px 24px rgba(16, 24, 40, .08); */
    overflow: hidden;
}

.boc-list--item .bocd-card {
    background: #0e3a8a;
    background: linear-gradient(
        0deg,
        rgb(22 65 148 / 60%) 34.18%,
        rgba(22, 65, 148, 1) 100%
    );
}

.boc-list--item .bocd-card::after {
    background: url("../images/general/graph-hais-4.png") top right / 35% auto
        no-repeat;
}

.bod-list--item .bocd-card {
    background: #0e3a8a;
    background: linear-gradient(
        180deg,
        rgb(206 227 252) 0%,
        rgb(244 249 253) 100%
    );
}

.bod-list--item .bocd-card::after {
    background: url("../images/general/graph-hais-5.png") top right / 35% auto
        no-repeat;
}

.bocd-card--link {
    position: relative;
    border-radius: var(--rd-xxl);
    padding: 2rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 1rem;
}

.bocd-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: 0.6;
}

.bocd-card--image {
    margin: 0;
    position: relative;
    aspect-ratio: 11 / 12;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.bocd-card--link .cta {
    z-index: 2;
    position: absolute;
    bottom: 16px;
    right: 16px;
    opacity: 0;
    transform: rotate(-45deg);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.bocd-card--link .cta::after {
    pointer-events: none;
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    filter: blur(12px);
    opacity: 1;
    bottom: 0;
    right: 0;
    transform: scale(0);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.bocd-card--link:hover .cta {
    opacity: 1;
}

.bocd-card--link:hover .cta::after {
    transform: scale(6);
}

.modalbocd-content--left {
    width: 50%;
    flex-shrink: 0;
}

.modalbocd-content--left-wrapper {
    position: relative;
    border-radius: var(--rd-xxl);
    /* box-shadow: 0 8px 24px rgba(16, 24, 40, .08); */
    overflow: hidden;
}

.modal-boc-content .modalbocd-content--left-wrapper {
    position: relative;
    background: #0e3a8a;
    background: linear-gradient(
        0deg,
        rgb(22 65 148 / 60%) 34.18%,
        rgba(22, 65, 148, 1) 100%
    );
}

.modal-boc-content .modalbocd-content--left-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: 0.6;
    background: url("../images/general/graph-hais-4.png") top right / 35% auto
        no-repeat;
}

.modal-bod-content .modalbocd-content--left-wrapper {
    background: #0e3a8a;
    background: linear-gradient(
        180deg,
        rgb(206 227 252) 0%,
        rgb(244 249 253) 100%
    );
}

.modal-bod-content .modalbocd-content--left-wrapper::after {
    background: url("../images/general/graph-hais-5.png") top right / 35% auto
        no-repeat;
}

.modalbocd-content--left .modalbocd-content--left-wrapper {
    position: sticky;
    top: 0rem;
}

.modalbocd-content--right .modal-close {
    z-index: 999;
    opacity: 1;
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.modalbocd-content--right .btn-close {
    opacity: 1;
    background-image: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    padding: 0;
    border-radius: var(--rd-50);
    background-color: #f54036;
    color: var(--c-white);
    font-size: 18px;
    font-weight: var(--f-w-semibold);
    position: relative;
    transition: all 0.3s;
    box-shadow:
        0px 20px 50px rgba(0, 0, 0, 0.12),
        0px 6px 20px rgba(0, 0, 0, 0.26);
}

.modal-bod-content .modalbocd-content--left-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: 0.6;
    background: url("../images/general/graph-hais-5.png") top right / 35% auto
        no-repeat;
}

/*====================================== SECTION TENTANG KAMI - STRUKTUR PERUSAHAAN ======================================*/
.section-margin-top {
    margin-top: -6rem;
}

.about-content-wrapper {
    background-color: var(--c-white);
    padding: 2rem;
    border-radius: var(--rd-xl);
}

.about-content-wrapper .about-content--head {
    border-bottom: 1px solid #d2d4dc;
    padding-bottom: 1rem;
}

.about-content-wrapper .about-content--head .cta {
    flex-shrink: 0;
}

/*====================================== SECTION ARTICLES OF ASSIOCIATION ======================================*/
.about-content--icon {
    width: 24px;
    height: 24px;
}

/*====================================== SECTION AWARDS CERTIFICATION ======================================*/
.section-awards-certifications .about-content-wrapper .about-content--head {
    border-bottom: unset;
    padding: 0;
}

.section-awards-certifications .about-content-wrapper .awards-content--head {
    border-bottom: 1px solid #d2d4dc;
    padding: 0 0 1rem 1rem;
}

.awards-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid #d2d4dc;
    border-radius: 16px;
    padding: 1rem;
}

.awards-list .awards-list--image {
    background-color: rgba(206, 217, 234, 0.25);
}

.awards-list .awards-list--image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 35.31%,
        #fff 100%
    );
    border-radius: var(--rd-lg);
}

.awards-list .awards-list--label {
    position: absolute;
    top: 4px;
    left: 4px;
}

.awards-list .awards-list--desc-top .awards-list--title {
    min-height: 72px;
}

.certif-container .awards-list .awards-list--desc-top .awards-list--title {
    min-height: auto;
}

.awards-list .awards-list--desc-bottom {
    border-top: 1px solid #d2d4dc;
    padding-top: 1rem;
}

/*====================================== SECTION BISNIS KAMI ======================================*/
.section-ob-intermezo {
    padding-bottom: 10rem;
}

.section-ob-list .ob-list-bg {
    position: absolute;
    top: -6rem;
}

.section-ob-value {
    background-size: 13rem;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: bottom 80px left;
}

.ob-value-card {
    height: 100%;
    width: 100%;
    padding: 2rem;
    background-color: #edf4fd;
}

.ob-value-card .obvalue-card--header-title p {
    min-height: 52px;
}

.section-other-subsidiary .career-highlight::before {
    background: linear-gradient(
        270deg,
        rgba(85, 116, 157, 0) 0%,
        rgba(85, 116, 157, 1) 100%
    );
}

.bi-highlight {
    min-height: 25rem;
    overflow: hidden;
}

.bi-highlight--ship-1 {
    position: absolute;
    right: 4rem;
    bottom: 1.5rem;
    transform: rotate(10deg);
    max-width: 11rem;
    pointer-events: none;
    /* animation: shipFloat1 6s ease-in-out infinite; */
}

.bi-highlight--ship-2 {
    position: absolute;
    right: 18rem;
    bottom: 3rem;
    transform: rotate(-10deg);
    max-width: 11rem;
    pointer-events: none;
    /* animation: shipFloat2 6s ease-in-out infinite; */
}

@keyframes shipFloat1 {
    0% {
        transform: translateY(0) translateX(0) rotate(10deg);
    }

    25% {
        transform: translateY(-10px) translateX(20px) rotate(12deg);
    }

    50% {
        transform: translateY(0) translateX(0) rotate(10deg);
    }

    75% {
        transform: translateY(10px) translateX(-20px) rotate(8deg);
    }

    100% {
        transform: translateY(0) translateX(0) rotate(10deg);
    }
}

@keyframes shipFloat2 {
    0% {
        transform: translateY(0) translateX(0) rotate(-10deg);
    }

    25% {
        transform: translateY(8px) translateX(20px) rotate(-8deg);
    }

    50% {
        transform: translateY(0) translateX(0) rotate(-10deg);
    }

    75% {
        transform: translateY(-8px) translateX(-20px) rotate(-12deg);
    }

    100% {
        transform: translateY(0) translateX(0) rotate(-10deg);
    }
}

.ob-card {
    position: relative;
    min-height: 38rem;
    height: 100%;
    width: 100%;
}

.ob-card .ob-card--content {
    padding: 3rem 8rem 3rem 3rem;
}

.ob-card,
.ob-card .ob-card--img img {
    border-radius: 24px;
}

.ob-card--img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
}

.ob-card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 2.67%,
        rgba(255, 255, 255, 1) 65.87%
    );
    z-index: 2;
}

.ob-card .ob-card--ornament {
    max-width: 140px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.ob-card--cta {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.ob-card--cta svg {
    height: 48px;
    width: 48px;
    border-radius: var(--rd-50);
    transition: all 0.3s;
}

.ob-card:hover .ob-card--cta svg {
    transform: scale(1.1);
    box-shadow: 0px 10px 30px rgba(9, 15, 26, 0.2);
}

/*====================================== SECTION BISNIS KAMI DETAIL ======================================*/

.section-obd-intermezo .obd-intermezo-bg {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.18%, #fff 100%);
    margin-top: -1.5rem;
}

.obd-armada-content .obd-armada-content--header {
    width: 100%;
    border-bottom: 1px solid #d2d4dc;
    padding-bottom: 1rem;
}

.obd-armada-content .obd-armada-content--body .armada-tab-desc {
    padding: 3rem 0rem;
}

.obd-desc-container {
    position: relative;
    padding: 8rem 0;
    background-size: cover;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: center center;
}

.obd-desc-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        270deg,
        rgba(22, 65, 148, 0) 39.32%,
        #164194 100%
    );
    z-index: 2;
}

.obd-armada-content .obd-armada-content--body .armada-tab-desc-body p {
    text-align: justify;
}

.section-obd-armada {
    background-size: 40vw;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: top 20vh right -10%;
}

.section-obd-armada .armada-tab-table {
    padding: 1rem;
    background-color: var(--c-white);
}

.section-obd-list .obd-list-bg {
    padding: 4rem 0rem 24rem 0rem;
}

.section-obd-list .obd-gallery-container {
    margin-top: -22rem;
}

.section-obd-list .cta-swiper-obd-gallery {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.section-obd-list .cta-swiper-obd-gallery .swiper-button-prev,
.section-obd-list .cta-swiper-obd-gallery .swiper-button-next {
    margin-top: 0rem;
}

.swiper-pagination-wrapper {
    position: relative;
}

.swiper-obd-gallery-pagination,
.swiper-tl-gallery-pagination {
    max-width: 320px;
    width: 100%;
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.swiper-obd-gallery-pagination .swiper-pagination-bullet,
.swiper-tl-gallery-pagination .swiper-pagination-bullet {
    width: 2.83rem;
    height: 0.25rem;
    margin: 0 !important;
    background: #9db5d4;
    opacity: 1;
    border-radius: 0rem;
    position: relative;
    overflow: hidden;
}

.swiper-obd-gallery-pagination .progress-bar,
.swiper-tl-gallery-pagination .progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--c-primary);
}

.swiper-tl-gallery-pagination .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background-color: #1d4ed8;
    transition: width 0.3s linear;
}

.swiper-tl-gallery-pagination .swiper-pagination-bullet-active::before {
    width: 100%;
}

.swiper-wrapper {
    margin: 0 auto;
}

.obd-gallery-card img,
.obd-gallery-card .skeleton-picture {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 20rem;
    border-radius: var(--rd-xxxl);
}

.section-obd-armada .armada-tab-table {
    width: 100%;
    overflow: auto;
}

/*====================================== SECTION KEBUTUHAN BISNIS ======================================*/
.section-bi-form {
    background-size: 18rem;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: bottom -104px right -80px;
}

.bi-form-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--c-white);
    padding: 2rem;
    border-radius: var(--rd-xl);
}

.bi-form-wrapper .bi-form-ornament {
    max-width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.bi-form-wrapper .nav-secondary {
    z-index: 3;
}

.form-services-hide {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
    opacity: 0;
}

.form-services-hide.active {
    max-height: 2000px;
    opacity: 1;
}

.service-radio-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-service-wrapper {
    border: 1px solid var(--c-grey);
    border-radius: var(--rd-md);
}

.input-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-service-label {
    position: relative;
    padding: 1rem 1rem 1rem 2rem;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    user-select: none;
}

.form-service-label::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid var(--c-grey);
    border-radius: 50%;
    background: var(--c-white);
    transition: all 0.3s ease;
}

.form-service-label::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 8px;
    height: 8px;
    background: var(--c-primary);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.input-radio:checked + .form-service-label::after {
    transform: translateY(-50%) scale(1);
}

.bi-right-content {
    padding-top: 8rem;
}

/*====================================== SECTION TATA KELOLA - KOMITE AUDIT ======================================*/
.card-person {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 2rem 0 2rem;
    border-radius: var(--rd-xl);
    /* background: linear-gradient(180deg,
            rgba(22, 65, 148, 1) 0%,
            rgba(22, 65, 148, 0.4) 100%); */
    background: linear-gradient(
        180deg,
        rgba(22, 65, 148, 1) 12.89%,
        rgba(115, 170, 236, 1) 100%
    );
}

.card-person.card-person-commite {
    padding: 2rem;
}

.card-person::before {
    content: "";
    position: absolute;
    top: -24px;
    right: -24px;
    width: 124px;
    height: 124px;
    background-image: url("../images/general/graph-hais-4.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.card-person .card-person--desc {
    flex: 1;
    height: 100%;
    width: 100%;
    padding: 5rem 0 2rem 0;
}

.card-person.card-person-commite .card-person--desc {
    height: auto;
    padding: 0;
}

.card-person .card-person--wrapper {
    z-index: 8;
    height: 240px;
    margin-top: -4rem;
}

.card-person.card-person-commite .card-person--wrapper {
    height: auto;
    margin-top: 0;
}

.card-person .card-person--img {
    height: 240px;
    max-width: 240px;
}

.btn--collapse {
    position: relative;
    overflow: hidden;
}

.span--collapse {
    display: inline-block;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
    will-change: transform, opacity;
}

.card-person--member {
    background: none;
    background-color: #dfe9f6;
    padding: 1rem 2rem 1rem 2rem;
}

.card-person--member .card-person--wrapper {
    height: auto;
    min-height: 5rem;
    margin-top: 0;
    padding: 0;
}

.card-person--member .card-person--desc {
    padding: 0rem;
}

.card-person--detail ul {
    list-style-type: disc;
    margin-left: 18px;
}

/*====================================== SECTION TATA KELOLA - WBS (Whistleblow) ======================================*/
.wbs-report-list {
    background-color: #edf4fd;
    padding: 1rem;
    border-radius: var(--rd-md);
}

.wbs-report-list span {
    flex-shrink: 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--c-primary);
    border-radius: var(--rd-50);
}

.form-report select.form-control,
.form-career select.form-control,
.form-contact select.form-control,
.section-bi-form select.form-control {
    border-color: var(--c-grey);
    border-radius: var(--rd-md);
    background-position: 98% 50%;
    padding: 0.75rem;
    color: var(--c-black);
}

.form-report select.form-control:hover,
.form-career select.form-control:hover,
.form-contact select.form-control:hover,
.section-bi-form select.form-control:hover {
    border-color: var(--c-primary);
}

.faq-accordion .accordion-item,
.finance-accordion .accordion-item {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #d2d4dc;
    border-left: 0;
}

.accordion-button {
    word-break: break-word;
    gap: 0.75rem;
}

.faq-accordion .accordion-item .accordion-button,
.finance-accordion .accordion-item .accordion-button {
    padding: 18px 16px 18px 16px;
    font-size: 18px;
    outline: 0;
    box-shadow: none;
}

.file-upload {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--c-grey);
    border-radius: 8px;
}

.file-upload--btn {
    padding: 0.625rem 1rem;
}

.file-upload .file-upload--btn {
    border: 1px solid #9db5d4;
    transition: all 0.3s;
    cursor: pointer;
}

.file-upload .file-upload--btn:hover {
    border: 1px solid var(--c-primary);
}

.file-upload .file-upload--btn .gallery-list--icon {
    color: var(--c-primary);
}

.file-upload--preview .file-upload--preview-image {
    position: relative;
    max-width: 260px;
    margin: 0 auto;
}

.file-upload--preview .file-upload--preview-image img {
    max-height: 200px;
}

.file-upload--preview .file-upload--preview-desc {
    text-align: center;
}

.file-upload--preview .file-upload-cta {
    position: absolute;
    top: 8px;
    right: 12px;
}

.file-upload--preview .btn-close {
    opacity: 1;
    background-image: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    padding: 0;
    border-radius: var(--rd-50);
    background-color: #f54036;
    color: var(--c-white);
    font-size: 18px;
    font-weight: var(--f-w-semibold);
    position: relative;
    transition: all 0.3s;
    box-shadow:
        0px 20px 50px rgba(0, 0, 0, 0.12),
        0px 6px 20px rgba(0, 0, 0, 0.26);
}

.file-upload--preview .btn-close:hover {
    outline: 0;
    opacity: 1;
    color: var(--c-white);
    background-color: #f54036;
}

.faq-accordion .accordion-item:first-of-type .accordion-button,
.finance-accordion .accordion-item:first-of-type .accordion-button {
    background-color: var(--c-transparent);
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed),
.finance-accordion .accordion-item .accordion-button:not(.collapsed) {
    background-color: #e1eeff;
}

.faq-accordion .accordion-item .accordion-button::after {
    background-image: url("../images/general/icon-accordion-plus.svg");
    background-position: center;
    transform: rotate(90deg);
    transition: all 0.3s;
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../images/general/icon-accordion-min.svg");
    background-position: center;
    transform: rotate(180deg);
    transition: all 0.3s;
}

.faq-accordion .accordion-item .accordion-body,
.finance-accordion .accordion-item .accordion-body {
    padding: 1rem;
}

/*====================================== SECTION HUBUNGAN INVESTOR - IKHTISAR KEUANGAN ======================================*/
.finance-accordion .accordion-item .accordion-button::after {
    background-image: url("../images/general/chevron-down.svg");
    background-position: center;
    transform: rotate(0deg);
    transition: all 0.3s;
}

.finance-accordion .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../images/general/chevron-down.svg");
    background-position: center;
    transform: rotate(180deg);
    transition: all 0.3s;
}

/*====================================== SECTION HUBUNGAN INVESTOR - OVERVIEW ======================================*/
.ir-strategy--list {
    min-width: 100%;
    width: 100%;
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: stretch;
    border-top: 1px solid #f5f8fd;
    border-bottom: 1px solid #f5f8fd;
}

.ir-strategy--list.extra-list {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease;
}

.ir-strategy--list.extra-list.is-open {
    /* max-height akan di-set inline via JS ke scrollHeight masing-masing item */
    opacity: 1;
    margin-top: 16px;
}

.ir-strategy--image {
    flex-shrink: 0;
    max-width: 25rem;
    border-top-left-radius: var(--rd-lg);
    border-bottom-left-radius: var(--rd-lg);
}

.ir-strategy--image img {
    border-top-left-radius: var(--rd-lg);
    border-bottom-left-radius: var(--rd-lg);
}

.ir-strategy--image::before {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 1) 100%
    );
}

.ir-strategy--desc {
    padding: 0.5rem 1rem;
}

.btn-strategy {
    overflow: hidden;
    position: relative;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 0.75rem;
    color: var(--c-primary);
    background-color: var(--c-transparent);
    border: none;
    font-weight: var(--f-w-semibold);
}

.ir-strategy--desc .ir-strategy--head {
    border-bottom: 1px solid var(--c-menu);
}

.investor-stock-finance .headline--cta .swiper-button-prev,
.investor-stock-finance .headline--cta .swiper-button-next {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.investor-stock-finance .headline--cta .swiper-button-prev:hover,
.investor-stock-finance .headline--cta .swiper-button-next:hover {
    background-color: var(--c-primary);
    color: var(--c-white);
}

.finance-card {
    width: 100%;
    height: 160px;
    background-color: var(--c-white);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border-radius: var(--rd-lg);
    background-image: url("../images/general/graph-hais-13.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 80px;
    transition: all 0.5s;
}

.finance-card:hover {
    transform: scale(1.05);
    background-size: 96px;
}

.finance-card .btn-icon-r {
    border: 0;
    width: 36px;
    height: 36px;
    box-shadow:
        -2px 4px 10px 2px rgb(22 65 148 / 0%),
        0px 6px 20px rgb(22 65 148 / 0%);
}

.finance-card .btn-icon-r span {
    transform: rotate(-45deg);
}

.finance-card .btn-icon-r:hover {
    transform: scale(1.1);
    box-shadow:
        -2px 4px 10px 2px rgb(22 65 148 / 15%),
        0px 6px 20px rgb(22 65 148 / 15%);
}

.ir-divider {
    width: 100%;
    height: 16px;
    background-color: var(--c-body);
    box-shadow: 0px -20px 20px 0px rgb(0 0 0 / 30%);
    pointer-events: none;
}

.ir-etc-card {
    padding: 2rem 2rem;
    /* max-width: 1240px; */
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

.ir-etc--img,
.ir-etc--img img {
    border-radius: 24px;
}

.ir-etc--img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
}

.ir-etc--img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    background: linear-gradient(270deg, rgb(22 65 148 / 40%) 0%, #164194 100%);
    z-index: 2;
}

.ir-etc-card.ir-etc-full .ir-etc--img::before {
    background: linear-gradient(
        270deg,
        rgba(22, 65, 148, 0) 39.32%,
        #164194 100%
    );
}

/*====================================== SECTION HUBUNGAN INVESTOR - PUBLIKASI-ANNUAL REPORT ======================================*/
.section-investor-publication .about-content--head.no-line {
    padding-bottom: 0;
    border-bottom: unset;
}

.section-investor-publication .article-list {
    padding: 0rem 1rem 1rem 0rem;
    border-bottom: 1px solid #d2d4dc;
    border-radius: 0;
}

.section-magazine-list .article-list {
    padding-bottom: 0;
    border-bottom: 0;
}

.section-magazine-list .article-list--image::before {
    border-radius: 0;
}

.section-investor-publication .article-list:nth-last-child(1) {
    border-bottom: none;
    padding: 0rem 1rem 0rem 0rem;
}

.section-investor-publication .nav-secondary .nav-pills,
.section-investor-publication .nav-secondary li.nav-item,
.section-investor-publication .nav-secondary .nav-pills .nav-link {
    white-space: nowrap;
    width: 100%;
    flex-shrink: unset;
}

.publication-report-wrapper .article-list--image {
    max-width: 120px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* border-radius: var(--rd-sm); */
}

.publication-report-wrapper .article-list--image img {
    /* border-radius: var(--rd-sm); */
}

.publication-report-wrapper .article-list--image::before {
    content: none;
}

/*====================================== SECTION HUBUNGAN INVESTOR - IKHTISAR KEUANGAN ======================================*/

thead th {
    background-color: var(--c-primary);
    color: var(--c-white);
    text-align: center;
    padding: 12px;
    font-weight: bold;
    border-right: 2px solid var(--c-white);
}

thead th:last-child {
    border-right: none;
}

tbody td {
    padding: 10px 12px;
    border-right: 2px solid var(--c-white);
}

tbody tr:nth-child(odd) {
    background-color: #e5edf6;
}

tbody tr:nth-child(even) {
    background-color: var(--c-white);
}

tbody td:first-child {
    text-align: left;
}

tbody td {
    text-align: right;
}

tfoot td {
    background-color: #3b6ba9;
    color: var(--c-white);
    text-align: right;
    padding: 12px;
    font-weight: bold;
    border-right: 2px solid var(--c-white);
}

.prospektus-card--image {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/*====================================== SECTION INFORMASI SAHAM ======================================*/

.stocks-chart-wrapper {
    height: 30rem;
}

.stocks-label-ojk {
    color: #2bb673;
}

.stock-holder-table tbody tr td:nth-child(2) {
    text-align: left;
}

.chrart-stocks-legends {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/*====================================== SECTION KEBERLANJUTAN - SUSTAINABILITY PAGE ======================================*/
.pillar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pillar-list--item {
    box-sizing: border-box;
    min-width: 0;
    flex: 0 0 calc((100% - 2 * 16px) / 3);
}

.pillar-list--item:nth-child(5n + 1),
.pillar-list--item:nth-child(5n + 2) {
    flex-basis: calc((100% - 16px) / 2);
}

.pillar-card {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.pillar-card .pillar-card--info {
    width: 100%;
    height: 204px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    border-radius: var(--rd-lg);
    overflow: hidden;
    user-select: none;
}

.pillar-card .pillar-card--info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        270deg,
        rgba(22, 65, 148, 0) 0%,
        rgba(22, 65, 148, 1) 100%
    );
    transition: all 0.3s;
}

.pillar-card .pillar-card--image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pillar-card.is-open .pillar-card--info::before {
    transform: scale(1.5);
}

.pillar-card .pillar-card--title {
    max-width: 75%;
}

.pillar-card .pillar-card--cta:hover .btn-icon-r {
    transform: scale(1.1);
}

.pillar-card--detail {
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--c-primary);
    border-radius: var(--rd-lg);
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.pillar-card--surface {
    background: var(--primary, #164194);
    color: #fff;
    padding: 1.5rem 2.5rem 1.5rem 2rem;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.pillar-card--surface ul {
    margin-left: 0;
}

.pillar-card--detail .close-pillar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.csr-card {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}

.csr-card a:before {
    z-index: 2;
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(22, 65, 148, 0) 35.31%,
        #164194 100%
    );
    transition: transform 0.5s ease-out;
}

.csr-card a:hover:before {
    transform: scale(2) translateY(-48px);
}

.csr-card .csr-card--image {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.csr-card .csr-card--image img {
    transition: transform 1.5s ease-out;
}

.csr-card:hover .csr-card--image img {
    transform: scale(1.25);
    transition: transform 5s ease-out;
}

.csr-card .csr-card--desc {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* padding: 12px 16px; */
    padding: 0.5rem;
}

.csr-card .csr-card--desc .csr-card--date {
    background: rgba(255, 255, 255, 0.6);
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.csr-card .csr-card--desc .csr-card--title {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5rem 1rem 0.5rem 1rem;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-top-left-radius: 0 !important;
    transition: all 0.6s;
}

/* .csr-card .csr-card--desc .csr-card--title::before {

} */

.csr-card:hover .csr-card--desc .csr-card--title {
    /* background: rgba(22, 65, 148, 0.5); */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.csr-card:hover .csr-card--desc .csr-card--title > * {
    color: var(--c-primary) !important;
}

/*====================================== SECTION KEBERLANJUTAN - SUSTAINABILITY DETAIL PAGE ======================================*/
.section-article-detail .hero-container {
    min-height: 35rem;
    height: 100%;
}

.cta-back:hover .btn-icon-r {
    transform: scale(1.1);
}

.sustainabilitydetail-share--list .sustainabilitydetail-share-link {
    display: inline-block;
    max-width: 2.5rem;
    transition: all 0.3s;
}

.sustainabilitydetail-share--list .sustainabilitydetail-share-link:hover {
    transform: scale(1.1);
}

/*====================================== SECTION MEDIA PAGE ======================================*/
.article-list {
    background-color: var(--c-white);
    padding-right: 1rem;
    border-radius: var(--rd-lg);
}

.article-list--image {
    max-width: 240px;
    flex-shrink: 0;
}

.article-list--image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(22, 65, 148, 0) 35.31%,
        #164194 100%
    );
    border-radius: var(--rd-lg);
}

.article-list .article-list--desc,
.article-list .cta {
    padding: 1rem 0;
    margin: auto;
}

.article-list .cta {
    flex-shrink: 0;
}

.article-list:hover .article--title a {
    color: var(--c-primary) !important;
}

.article-label,
.awards-list-label,
.publication-investornews-label {
    width: fit-content;
    background-color: var(--c-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--rd-xxl);
}

.gallery-list--icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.media-gallery-video {
    cursor: pointer;
}

.media-gallery-video .media-gallery-video--thumbnail {
    margin-bottom: 0rem;
}

.media-gallery-video .media-gallery-video--content video,
.media-gallery-video .media-gallery-video--thumbnail img {
    height: 100%;
    width: 100%;
    max-height: 360px;
}

.media-gallery-video .media-galery--play-control {
    height: 100%;
    width: 100%;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.media-gallery-video .media-galery--play-control:hover {
    transform: scale(1.1);
}

.media-gallery-video .media-galery--play-control .icon-play {
    cursor: pointer;
}

.media-gallery-video.video-playing .media-galery--play-control {
    opacity: 0;
}

.media-gallery-video.video-playing:hover .media-galery--play-control {
    opacity: 1;
}

.pagination-container .pagination-content--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.pagination-container .pagination-content--wrapper .pagination-content--link {
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border: 1px solid #d2d4dc;
    color: var(--c-primary);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    white-space: nowrap;
}

.pagination-container
    .pagination-content--wrapper
    .pagination-content--link.active {
    border: 1px solid #d2d4dc;
    color: var(--c-white);
    background-color: var(--c-primary);
}

.menu-category .cta-media-category {
    cursor: pointer;
}

.menu-category .cta-media-category .menu-category--card {
    display: block;
    padding: 8px 16px;
    border: 1px solid #cbe1fc;
    border-radius: 12px;
    color: var(--c-primary);
    transition: all 0.3s;
}

.menu-category .cta-media-category input:checked + .menu-category--card {
    background: #cbe1fc;
}

.menu-category {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding-right: 0.25rem;
    scroll-snap-type: x mandatory;
}

.menu-category,
.menu-category * {
    user-select: none;
}

.menu-category::-webkit-scrollbar {
    display: none;
}

.menu-category .cta {
    flex-shrink: 0;
}

/*====================================== SECTION MEDIA PAGE - GALLERY ======================================*/
.media-gallery--image {
    width: 100%;
    height: 240px;
    border-radius: var(--rd-lg);
}

.media-gallery--image img {
    object-fit: cover;
    border-radius: var(--rd-lg);
}

.filter-topic-wrapper select.form-control {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
}

/*====================================== SECTION MEDIA PAGE - PANDUAN LOGO ======================================*/
.panduan-logo-intro .media-gallery-video .media-gallery-video--content video,
.panduan-logo-intro .media-gallery-video .media-gallery-video--thumbnail img {
    max-height: 400px;
}

.panduan-logo-intro .media-gallery-video .media-gallery-video--thumbnail {
    position: relative;
}

.panduan-logo-intro
    .media-gallery-video
    .media-gallery-video--thumbnail::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(22, 65, 148, 0) 35.31%,
        #164194 100%
    );
    border-radius: var(--rd-lg);
}

.panduan-logo-filosofi .panduan-logofilosofi--head {
    border-bottom: 1px solid #d2d4dc;
    padding-bottom: 1rem;
}

.filosofilogo-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filosofilogo-card .filosofilogo-card--image {
    max-width: 64px;
    border-radius: 50%;
}

.filosofilogo-download-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/*====================================== SECTION CAREER PAGE ======================================*/
.section-career-intermezo {
    background-size: contain;
    object-fit: none;
    background-repeat: no-repeat;
    background-position: center right -204px;
}

.career-testimoni-container {
    overflow: hidden;
    background-size: cover;
    position: relative;
}

.career-testimoni-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(22, 65, 148, 0) 35.93%,
        #164194 100%
    );
}

.swiper-career-testi {
    height: auto !important;
    width: fit-content;
    overflow: hidden;
    max-height: 32rem;
}

.career-testimoni-wrapper {
    padding: 2rem 0 0 0;
}

.section-career-testimoni .swiper-pagination-wrapper {
    position: unset;
    height: 100%;
    width: auto;
}

.swiper-career-testi .swiper-slide .career-testi-list {
    opacity: 0.4;
    transition: all 0.3s;
}

.swiper-career-testi .swiper-slide.swiper-slide-active .career-testi-list {
    opacity: 1;
}

.career-testi-list {
    height: auto;
    width: 100%;
    max-width: 620px;
    background-color: var(--c-white);
    border-radius: var(--rd-xxl);
}

.career-testi-list .career-testi--desc-top {
    padding: 1rem;
    min-height: auto;
    max-height: 22.5rem;
    overflow-y: auto !important;
    height: 100%;
}

.career-testi-list .career-testi--desc-bottom {
    padding: 1rem 4rem 1rem 1rem;
    border-bottom-left-radius: var(--rd-xxl);
    border-bottom-right-radius: var(--rd-xxl);
}

.career-testi-list .career-testi--desc-bottom {
    background-image: url(../images/general/graph-hais-3.png);
    background-size: 94px auto;
    background-repeat: no-repeat;
    background-position: bottom right;
    overflow: hidden;
    width: 100%;
    background-color: #edf4ff;
    transition: all 0.3s;
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
    transform: none;
}

.career-highlight,
.capital-market-card,
.bi-highlight {
    padding: 3rem 4rem;
    /* max-width: 1240px; */
    max-width: 100%;
    margin: 0 auto;
}

.career-highlight,
.career-highlight img,
.capital-market-card,
.capital-market-card img,
.bi-highlight,
.bi-highlight .bi-highlight--img img {
    border-radius: 24px;
}

.career-highlight--img,
.capital-market-card--img,
.bi-highlight--img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
}

.bi-highlight--wave-1 img,
.bi-highlight--wave-2 img {
    object-fit: fill;
    pointer-events: none;
}

.career-highlight::before,
.capital-market-card::before,
.bi-highlight::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    background: linear-gradient(
        270deg,
        rgb(22 65 148 / 30%) 39.32%,
        #164194 100%
    );
    z-index: 2;
}

.career-position-header {
    background-image: url("../images/general/graph-hais-5.png");
    background-size: 100px auto;
    background-repeat: no-repeat;
    background-position: top right;
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
}

.career-position-header .menu-filter-container .form-control {
    max-width: 16rem;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-position-header .menu-filter-container #topic.form-control {
    background-position: 95% 50%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
}
.career-list {
    background-image: url("../images/general/sg-1.png");
    background-size: 96px auto;
    background-repeat: no-repeat;
    background-position: top right;
    overflow: hidden;
    width: 100%;
    background-color: var(--c-white);
    border-radius: var(--rd-xxl);
    transition: all 0.3s;
}

.career-list .career-list--link {
    padding: 2.5rem 4rem 2.5rem 2rem;
    transition: all 0.3s;
}

.career-list---meta li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.career-list .career-list--icon {
    width: 26px;
    height: 26px;
    color: var(--c-menu);
    fill: currentColor;
    transition: all 0.3s;
}

.career-list .cta svg {
    width: 48px;
    height: 48px;
    border-radius: var(--rd-50);
    transition: all 0.3s;
}

.career-list:hover {
    background-size: 90px auto;
    background-color: #e1eeff;
    transform: scale(1.01);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.career-list:hover .career-list--icon {
    color: var(--c-primary);
}

.career-list:hover .cta svg {
    transform: scale(1.1);
    box-shadow: 0px 10px 30px rgba(9, 15, 26, 0.2);
}

.modal-careerform-intermezo {
    padding-bottom: 1rem;
    border-bottom: 1px solid #d2d4dc;
}

.form-career select.form-control:invalid,
.form-contact select.form-control:invalid {
    color: var(--c-grey);
}

.form-career select.form-control option,
.form-contact select.form-control option {
    color: var(--c-black);
}

/*====================================== SECTION CONTACT PAGE ======================================*/
.contact-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--c-white);
    padding: 0.75rem;
}

.contact-card-content .contactcard-content--body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #f4f8ff;
    padding: 1.5rem;
}

.contact-card-content .contactcard-content--body .contact-list {
    display: flex;
    gap: 1rem;
}

.contact-card-content .contactcard-content--body a {
    color: var(--c-menu);
}

.contact-card-content .contactcard-content--body a:hover {
    color: var(--c-primary);
}

.contact-card-content .contactcard-content--body .contact-list--icon {
    width: 16px;
    height: 16px;
}

.contactcard-content--head iframe {
    height: 360px;
}

/*====================================== SECTION 404  ======================================*/
section.section-notfound {
    padding: 0;
}

.notfound-container {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.notfound-container::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(22, 65, 148, 0) 35.31%,
        rgba(22, 65, 148, 0.58) 100%
    );
}

.notfound-layout---img {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -54px;
}

.notfound-layout--title,
.notfound-layout--desc {
    position: absolute;
}

.notfound-layout--title {
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    pointer-events: none;
}

.notfound-layout--title .image {
    max-width: 540px;
}

.notfound-layout--desc {
    z-index: 2;
    bottom: 48px;
    left: 0;
    width: 100%;
    padding: 1rem;
}

.notfound-desc--wrapper {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--rd-lg);
}

/*====================================== SECTION 503  ======================================*/
.maintenance-container {
    min-height: 100vh;
    width: 100%;
    background-image: url("../images/maintenance-bg.jpg");
    background-size: cover;
    box-shadow: none;
    background-repeat: no-repeat;
}

.mt-layout--title {
    margin-bottom: -9rem;
}

.mt-layout--title h1 {
    color: #647ea7;
    font-size: 22.5rem;
    line-height: 0.8;
}

.mt-layout--desc {
    margin-top: -5rem;
}

/*====================================== SECTION EMPTY WRAPPER ======================================*/

.empty-state-wrapper .empty-state-image {
    max-width: 20rem;
}

/*====================================== SECTION FOOTER ======================================*/

footer {
    position: relative;
    z-index: 1;
    padding: 4rem 0 2rem 0;
    background-color: var(--c-primary);
    border-top-left-radius: var(--rd-xxl);
    border-top-right-radius: var(--rd-xxl);
}

footer::before {
    z-index: -1;
    /* z-index: ; */
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 480px;
    height: 480px;
    /* inset: 0; */
    background-image: url("/images/general/graph-hais-6.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.footer-brand--address a:hover {
    color: var(--c-tertiary) !important;
}

.footer-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-menu .footer-menu--link a {
    position: relative;
    font-size: 14px;
    display: inline-flex;
    color: #ced9ea;
    font-weight: var(--f-w-regular);
}

.footer-contact--wrapper .footer-link--list a::before,
.footer-menu .footer-menu--link a::before,
.footer-menu .footer-menu--link.active a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--c-white);
    transition: all 0.5s ease-in-out;
}

.footer-menu .footer-menu--link:hover a {
    color: var(--c-white);
}

.footer-contact--wrapper .footer-link--list:hover a::before,
.footer-menu .footer-menu--link:hover a::before,
.footer-menu .footer-menu--link.active a::before,
.footer-menu .footer-menu--link:hover.active a::before {
    width: 100%;
}

.footer-menu .footer-menu--link.active a {
    color: var(--c-white);
    font-weight: var(--f-w-bold);
}

.footer-social--link:hover {
    transform: scale(1.1);
}

.wa-floating {
    z-index: 999;
    position: fixed;
    bottom: 2%;
    right: 20px;
    transition: all 0.3s;
}

.wa-floating:hover {
    transform: translateY(-10px);
    /*box-shadow: 0 8px 18px 0 rgba(0,0,0,.18);*/
}

.wa-floating a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}

.wa-floating p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
    color: #0303c6;
}

.wa-floating .image {
    max-width: 60px;
}

@keyframes maka {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

footer.footer .footer-copyright span {
    display: inline-block;
    margin-right: 1px;
}

.footer-sosmed-list span {
    color: black;
}

.footer-sosmed-list span i {
    font-size: 1rem;
    width: 16px;
}

.footer-list a:hover,
.footer-sosmed-list a:hover span {
    color: var(--c-primary);
}

.footer-question-card {
    padding: 1.25rem 2rem;
    border-radius: 12px;
    box-shadow: 0px 5px 20px 0px
        rgba(118.93125915527345, 118.93125915527345, 118.93125915527345, 0.2);
}

footer .footer-list a span {
    display: block;
    line-height: 1.5;
    font-weight: 400;
    font-size: 0.75rem;
}

.maka-color {
    color: #ceebf8 !important;
}

footer.footer .footer-copyright span a {
    color: #ceebf8 !important;
}

footer.footer .footer-copyright:hover span:nth-child(1) {
    animation: maka 0.9s ease-in-out;
}

footer.footer .footer-copyright:hover span:nth-child(2) {
    animation: maka 1.1s ease-in-out;
}

footer.footer .footer-copyright:hover span:nth-child(3) {
    animation: maka 1.3s ease-in-out;
}

footer.footer .footer-copyright:hover span:nth-child(4) {
    animation: maka 1.5s ease-in-out;
}

.m-none {
    margin: 0 !important;
}

.mb0 {
    margin-bottom: 0px;
}

.mb4 {
    margin-bottom: 4px;
}

.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb32 {
    margin-bottom: 32px;
}

.mb48 {
    margin-bottom: 48px;
}

.mb64 {
    margin-bottom: 64px;
}

.mb80 {
    margin-bottom: 80px;
}

.mb100 {
    margin-bottom: 100px;
}

.mt0 {
    margin-top: 0px;
}

.mt8 {
    margin-top: 8px;
}

.mt16 {
    margin-top: 16px;
}

.mt24 {
    margin-top: 24px;
}

.mt32 {
    margin-top: 32px;
}

.mt48 {
    margin-top: 48px;
}

.mt64 {
    margin-top: 64px;
}

.mt80 {
    margin-top: 80px;
}

.mt100 {
    margin-top: 100px;
}

.mt100 {
    margin-top: 100px;
}

.row-gap-1 {
    row-gap: 1rem;
}

.row-gap-2 {
    row-gap: 2rem;
}

/*====================================== SECTION SKELETON ======================================*/

.skeleton-card,
.skeleton-card:hover,
.skeleton-card::before {
    border: 0px solid #f5f3f3 !important;
    background: var(--c-transparent) !important;
    background-color: var(--c-transparent) !important;
    box-shadow: none;
    transform: scale(1) !important;
    /* animation: shimmer 0.3s infinite linear; */
}

.skeleton-card::before {
    content: unset;
}

.skeleton-picture,
.skeleton-text {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: var(--c-skeleton);
    border-radius: 1rem;
}

.article-list.skeleton-card,
.article-list.skeleton-card:hover,
.home-stock.skeleton-card,
.home-stock.skeleton-card:hover,
.skeleton-pagination.skeleton-card,
.bocd-card.skeleton-card,
.ob-card.skeleton-card,
.career-testi-list.skeleton-card,
.career-list.skeleton-card,
.obd-gallery-card.skeleton-card {
    background-color: var(--c-white) !important;
}

.card-person.skeleton-card {
    background: linear-gradient(
        180deg,
        rgb(242 247 255) 12.89%,
        rgba(115, 170, 236, 1) 100%
    ) !important;
}

.hero-container.skeleton-card::before {
    content: "" !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #194495 !important;
    background: linear-gradient(
        180deg,
        rgba(25, 68, 149, 1) 0%,
        rgba(54, 97, 166, 0.9) 20%,
        rgb(255 255 255 / 15%) 90%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
}

.skeleton-card figure::before,
.skeleton-card.bocd-card::after,
.skeleton-card .pillar-card .pillar-card--info::before {
    content: unset;
}

.skeleton-card.awards-list {
    border: 1px solid #d2d4dc !important;
}

.skeleton-picture.xs {
    width: 100%;
}

.skeleton-picture.sm {
    height: 2.25rem;
}

.skeleton-picture.md {
    height: 3rem;
}

.skeleton-picture.lg {
    height: 4rem;
}

.skeleton-picture.xl {
    height: 5.25rem;
}

.skeleton-picture.xxl {
    height: 8rem;
}

.skeleton-picture.xl-3 {
    height: 10rem;
}

.skeleton-picture.xl-4 {
    height: 15rem;
}

.skeleton-picture.xl-5 {
    height: 20rem;
}

.skeleton-picture.xl-6 {
    height: 22.5rem;
}

.skeleton-picture.xl-7 {
    height: 25rem;
}

.skeleton-picture.xl-8 {
    height: 30rem;
}

.skeleton-text.xs {
    height: 0.5rem;
}

.skeleton-text.sm {
    height: 0.75rem;
}

.skeleton-text.md {
    height: 1rem;
}

.skeleton-text.lg {
    height: 1.5rem;
}

.skeleton-text.xl {
    height: 2rem;
}

.skeleton-text.xxl {
    height: 2.5rem;
}

.skeleton-text.xl-3 {
    height: 3rem;
}

.skeleton-text.xl-4 {
    height: 4rem;
}

.skeleton-text.xl-5 {
    height: 5rem;
}

.skeleton-text::before,
.skeleton-picture::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        to right,
        rgba(22, 64, 148, 0.05) 0%,
        rgba(22, 64, 148, 0.2) 30%,
        rgba(22, 64, 148, 0.2) 70%,
        rgba(22, 64, 148, 0.05) 100%
    );
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}