/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

/* ==========================================================================
   LENIS SMOOTH SCROLL & BROWSER COMPATIBILITY
   ========================================================================== */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

html {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        color-scheme: light only;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Chrome Hardware Acceleration for Scroll-Animated Elements */
[class*="glit-ornament-"],
.card-speaker-large,
.wrp-card-the-number {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* 10. Create a root stacking context */
#root,
#__next {
    isolation: isolate;
}

:root {
    color-scheme: light;
    --font-libre: 'Libre Caslon Text', serif;
    --font-geist: 'Geist', sans-serif;


    --tiif-red: #e6302a;
    --tiif-red-dark: #b31217;
    --tiif-dark: #16181d;
    --tiif-muted: #8a94a6;
    --tiif-text: #414c5c;
    --tiif-bg: #eef1f6;
    --footer-pad-x: clamp(24px, 8vw, 155px);

    /* MONOCHROME COLOR PALETTE */
    --white-trans-full: rgba(255, 255, 255, 0);
    --white-trans-2: rgba(255, 255, 255, 0.2);
    --white-one: #ffffff;
    --gray-950: #12171c;
    --gray-900: #212830;
    --gray-800: #212831;
    --gray-700: #3b4754;
    --gray-600: #46515d;
    --gray-500: #6e7887;
    --gray-400: #98a1ae;
    --gray-300: #d1d5db;
    --gray-200: #e2e5e9;
    --gray-100: #f3f5f6;
    --gray-50: #f9fafb;
    --gray-25: #fcfcfb;
    --gray-15: #fefefe;

    /* SCARLET RED COLOR PALETTE */
    --scarlet-red-950: #821a1e;
    --scarlet-red-900: #9d171d;
    --scarlet-red-800: #9d171d;
    --scarlet-red-700: #be171e;
    --scarlet-red-600: #e22028;
    /* PRIMARY COLOR LOGO */
    --scarlet-red-500: #f53e46;
    --scarlet-red-400: #fc6d73;
    --scarlet-red-300: #ffa2a6;
    --scarlet-red-200: #ffc8ca;
    --scarlet-red-100: #ffe1e2;
    --scarlet-red-50: #fef2f2;
}

/* CONTAINER GLOBAL START*/

.center-container {
    max-width: 1330px;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
    margin-right: auto;
    margin-left: auto;
}

.container-large {
    max-width: 99.86%;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
}

.centered-container {
    max-width: 1170px;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
    margin-right: auto;
    margin-left: auto;
    /* border: 1px solid #cf0000; */
}

/* CONTAINER GLOBAL END*/


/* NAVBAR DESKTOP START */

.navbar-mobile {
    display: none;
}

.header {
    width: 100%;
    height: auto;
    min-height: 64px;
    position: fixed;
    top: 0px;
    z-index: 9998;
    /* border: 1px solid #cf0000; */
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: .5s ease-in-out;
}

.header.scroll {
    transform: translateY(-98px);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: .4s ease-in-out;
}

.navbar-desc {
    background: transparent none;
    min-height: 72px;
    width: 100%;
    transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    position: fixed;
    top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 99;
}

.navbar-hidden {
    transform: translateY(-108px);
    transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
}

.navbar-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 18px;
    position: relative;
    z-index: 7;
}

.navbar-gradients {
    background: transparent none;
    min-height: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
    z-index: 9;
}


.navbar-solid {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    min-height: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0px;
    padding-right: 0px;
    justify-content: center !important;
    -ms-justify-content: center !important;
    -moz-justify-content: center !important;
    -webkit-justify-content: center !important;
    z-index: 8;
    position: relative;
    box-shadow: 0 1px 10px rgba(151, 164, 175, .24);
    -ms-box-shadow: 0 1px 10px rgba(151, 164, 175, .24);
    -moz-box-shadow: 0 1px 10px rgba(151, 164, 175, .24);
    -webkit-box-shadow: 0 1px 10px rgba(151, 164, 175, .24);
}

.logo-brand {
    width: 124px;
    overflow: unset;
    position: relative;
    transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    margin-left: 10px;
}

.logo-brand a img {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}

.logo-brand-centered {
    width: 304px;
}

.logo-brand-centered a img {
    max-width: 100%;
}

.navbar-items-menu {
    width: fit-content;
    min-height: 10px;
    height: auto;
}

.navbar-nav {
    flex-direction: row;
}

.wrp-nav-item {
    /* min-width: 796px; */
    min-width: 820px;
    width: auto;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    gap: 18px;
}

.chevron-down {
    width: 16px;
    height: auto;
    padding: 3.5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    margin-top: 3.5px;
}

.all-menu {
    width: 26px;
    height: auto;
    padding: 3.5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    margin-top: 0.5px;
    margin-right: 6px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.navbar-items-menu ul li a:hover .all-menu svg path {
    fill: var(--aqua-blue-600);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.text-nav {
    width: auto;
    height: auto;
    padding-right: 8px;
}

.text-nav p {
    margin-bottom: 0px;
}

.chevron-down svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.chevron-down svg path.cls-1 {
    fill: var(--gray-800);
}

.navbar-items-menu ul li a {
    cursor: pointer;
    position: relative;
    overflow: unset;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    color: var(--gray-800);
    font: normal 400 18.32px/22.64px var(--font-geist);
    letter-spacing: 0.32px;
    line-height: 148%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 3.5px;
    padding-right: 3.5px;
}

.navbar-items-menu ul li a:hover .text-nav {
    color: var(--scarlet-red-600);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
}

.navbar-items-menu ul li a:focus {
    color: var(--scarlet-red-600);
}

.navbar-items-menu ul li a::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--aqua-blue-100);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: -1.5px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    opacity: 0;
}

.navbar-items-menu ul li:hover>a::before {
    content: "";
    width: 16px;
    height: 2px;
    bottom: -1.5px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    opacity: 1;
}

.navbar-items-menu ul li:hover>a {
    text-decoration: none;
    outline: none;
    color: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.navbar-items-menu ul li:focus>a {
    text-decoration: none;
    outline: none;
    color: var(--aqua-blue-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.navbar-items-menu ul li:hover>a .chevron-down svg path {
    fill: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}


.dropdown-menu {
    position: absolute;
    left: 0px;
    top: 100%;
    min-width: 280px;
    z-index: 100;
    display: none;
    box-shadow: 0px 9px 8px 4px rgba(0, 0, 0, 0.056);
    -webkit-box-shadow: 0px 9px 8px 4px rgba(0, 0, 0, 0.056);
    -moz-box-shadow: 0px 9px 8px 4px rgba(0, 0, 0, 0.056);
}

.navbar-items-menu ul li a:hover .chevron-down svg path {
    fill: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

/* TAMBAHKAN INI */
li.dropdown-hover {
    /* position: relative; */
    position: static;

}

.wrp-nav-item .nav-item {
    flex: unset !important;
}

.navbar-items-menu ul li.dropdown-hover ul li a {
    font: normal 400 18.32px/22.64px var(--font-geist);
    color: var(--scarlet-red-600);
    letter-spacing: 0.24px;
    line-height: 138%;
}


/* SLIDE IN DROPDOWN ANIMATION */
/* SLIDE IN DROPDOWN ANIMATION */
.slideIn {
    animation-name: slideIn;
}

.animate {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.navbar-nav li:hover>ul.first-level {
    border-top: 16px solid transparent;
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

.dropdown-hover:hover>.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    left: 0px;
    top: 100%;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 6.4px;
    border-bottom-right-radius: 6.4px;
    height: auto;
    width: 100%;
}

.navbar-items-menu ul li.position-relative a::before {
    margin-left: unset;
    margin-right: unset;
    left: 1px;
    width: 2px;
    height: 16px;
    bottom: 10px;
    opacity: 0;
}

.wrp-nav-item .navbar-nav li:hover>ul li.position-relative a:hover>a::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 10px;
    left: 1px;
    transition: 0.5s;
    opacity: 1;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover {
    color: var(--scarlet-red-600);
    transition: 0.5s;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 15px;
    left: 1px !important;
    transition: 0.5s;
    opacity: 1;
    position: absolute;
    background: var(--scarlet-red-600);
    margin-left: unset;
    margin-right: unset;
}

.dropdown-menu-ds {
    width: 94px !important;
    min-width: 64px;
    padding: 0px 2px;
    text-align: center;
    top: -2px;
    z-index: 3;
}

.dropdown-menu-ds:hover {
    background-color: #f8f9fa;
}

.dropdown-menu-ds a {
    padding: 5px 5px !important;
    font-size: 15px;
    font-weight: 600;
    color: #363636;
}

.dropdown-menu-ds .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    cursor: pointer;
}

/* SLIDE IN DROPDOWN ANIMATION */
.dropdown-hover:hover>.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    left: 0px;
    top: 100%;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 6.4px;
    border-bottom-right-radius: 6.4px;
    height: auto;
    /* max-width: 296px;
	min-width: 232px; */
    width: 100%;
}

/* HERO TEXT ANIMATION START */
.animate-text-span {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-20px) scale(0.6);
    display: inline-block;
    white-space: pre;
    animation: fadeInDrop 0.3s forwards;
    /* Speed will be controlled by delay in JS, but base duration here */
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(64px);
    animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeInDrop {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HERO TEXT ANIMATION END */

/* CONNECTIONS LAYER START */
.section-header-product {
    position: relative;
}

.connections-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Ensure clicks pass through to underlying elements */
    z-index: 5;
    /* Place below cards if needed, or adjust based on requirement */
    overflow: visible;
}

.card-component {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* Optional: slight slide up effect */
}

.connection-line {
    fill: none;
    stroke: var(--aqua-blue-500);
    /* Use your primary color */
    stroke-width: 2px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* Ensure pulsating circles are above lines */
.pulsating-circle {
    z-index: 2;
}

/* CONNECTIONS LAYER END */

.dropdown-hover:hover>ul.first-level {
    border-top: 19px solid transparent !important;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    padding-bottom: 0px;
}

.dropdown-menu li {
    width: 100%;
    padding: 9.6px 20px;
}

.dropdown-menu li a {
    font-size: clamp(0.8475rem, 0.5304rem + 0.4955vw, 1.125rem) var(--font-plus-jakarta);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    line-height: 138%;
    text-decoration: none;
    outline: none;
}

.dropdown-menu li a:hover {
    color: var(--aqua-blue-500) !important;
    text-decoration: none;
}

.widget-pra-ipo {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.emiten-price {
    height: auto;
    text-decoration: none;
    color: #fff;
}

.emiten-price p {
    margin-bottom: 0px;
    color: #fff;
    font: 500 15px/19px var(--font-geist);
}

.emiten-price span {
    padding-left: 6px;
}

.emiten-state {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    margin-left: 10px;
    text-decoration: none;
}

.icon-state-emiten {
    width: 24px;
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.icon-state-emiten svg {
    max-width: 100%;
}

.icon-state-emiten.up-green svg path {
    fill: #02b04d;
}

.icon-state-emiten.down-red svg path {
    fill: #cc0505;
}

.percentage-emiten {
    height: auto;
    padding-left: 8px;
    font: 500 15px/19px var(--font-geist);
}

.percentage-emiten p {
    margin-bottom: 0px;
    color: #fff;
}

.burger-mobile {
    display: none;
}

.navbar-mobile-container {
    display: none;
}

.icon-search {
    margin-right: 10px;
    width: 34px;
    height: 32px;
    padding: 5.5px 5.5px 5.5px 12px;
    cursor: pointer;
    border-radius: 20px;
    border: 0px solid var(--gray-300);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    position: relative;
}

.icon-search::before {
    width: 1.5px;
    height: 21px;
    background: var(--aqua-blue-300);
    /* content: ""; */
    position: absolute;
    left: 0px;
    bottom: 6.5px;
}

.icon-search svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.icon-search svg path.cls-1 {
    fill: var(--gray-800);
}

.icon-search svg path.cls-2 {
    fill: var(--gray-800);
}

.top-item-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.icon-top-nav {
    min-width: 64px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    color: #fff;
    text-decoration: none;
    mix-blend-mode: difference !important;
    -ms-mix-blend-mode: difference !important;
    -moz-mix-blend-mode: difference !important;
    -webkit-mix-blend-mode: difference !important;
    transition: color 0.3s ease;
}


/* LANGUAGE START*/

.desktop-language {
    position: relative;
    width: 64px;
    margin-left: 12px;
}

#dropdownLangdesk img {
    display: none;
}

.d-lang-desktop {
    top: 0px;
    right: 1px;
    position: relative;
}

.d-lang-desktop::before {
    content: " ";
    width: 12px;
    height: 12px;
    border: 0px;
    top: 15px;
    position: absolute;
    left: -8px;
    right: unset;
    background: url('../images/icons/caret-arrow-down-white.svg') no-repeat center center;
    background-size: contain;
    display: inline-block;
}

#dropdownLangdesk {
    position: relative;
    padding-right: 30px;
    padding-left: 10px;
    margin-right: 15px;
    margin-top: 1px;
    background: var(--bg-tranpasrent);
    color: var(--white-one);
    font-size: 15px;
    line-height: 28px;
    font-family: var(--font-geist);
    font-weight: 400;
    letter-spacing: 0.4px;
    text-align: left;
    border: 0px !important;
}

#dropdownLangdesk::before {
    width: 1px;
    height: 21px;
    background: var(--aqua-blue-300);
    content: "";
    position: absolute;
    left: -16px;
    bottom: 10px;
}

#dropdownLangdesk:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0px !important;
}

.dropdown-menu-ds {
    width: 94px !important;
    min-width: 64px;
    padding: 0px 2px;
    text-align: center;
    top: -2px;
    z-index: 3;
}

.dropdown-menu-ds:hover {
    background-color: #f8f9fa;
}

.dropdown-menu-ds a {
    padding: 5px 5px !important;
    font-size: 15px;
    font-weight: 600;
    color: #363636;
}

.lang-flag {
    width: 20px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 2px;
    object-fit: cover;
}

.dropdown-menu-ds .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    cursor: pointer;
}

.lang-group {
    display: flex;
    align-items: center;
}

.lang-text {
    font-weight: 500;
    font-size: 14px;
}

/* Icon Checklist */
.check-icon {
    width: 12px !important;
    height: 12px !important;
    fill: var(--aqua-blue-500);
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-right: 5px;
}

.dropdown-item.active .check-icon {
    opacity: 1;
    fill: var(--aqua-blue-500) !important;
}

.btn-lang-desktop {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d-lang-desktop .dropdown-item.active {
    background: var(--aqua-blue-50) !important;
    color: var(--aqua-blue-500);
}


.dropdown-menu-ds a:hover,
.dropdown-menu-ds a:focus {
    background: transparent none;
    color: #363636;
    border: transparent none;
}

#dropdownLangdesk::after {
    content: " ";
    width: 20px;
    height: 20px;
    border: 0px;
    top: 10px;
    position: absolute;
    right: unset;
    left: unset;
    right: -6px;
    background: url('../images/icons/global.svg') no-repeat center center;
    background-size: contain;
    filter: brightness(0) invert(1);
    /* Ensure white icon */
    display: inline-block;
    padding: 6px;
}

/* LANGUAGE END */

.text-icon-top {
    padding-left: 10px;
    font-size: 14.5px;
    padding-right: 15px;
    mix-blend-mode: difference !important;
    -ms-mix-blend-mode: difference !important;
    -moz-mix-blend-mode: difference !important;
    -webkit-mix-blend-mode: difference !important;
    transition: color 0.3s ease;
    z-index: 6;
}

.text-icon-top p {
    margin-bottom: 0px;
    mix-blend-mode: difference !important;
    -ms-mix-blend-mode: difference !important;
    -moz-mix-blend-mode: difference !important;
    -webkit-mix-blend-mode: difference !important;
    transition: color 0.3s ease;
    color: #fcfcfb;
}

.icon-top-contact {
    width: 20px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.icon-top-contact svg {
    max-width: 100%;
}

.icon-top-contact svg path.cls-1 {
    fill: #fff;
    mix-blend-mode: difference !important;
}

.lang {
    width: 106px;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: end;
    -ms-justify-content: end;
    -moz-justify-content: end;
    -webkit-justify-content: end;
    gap: 4.5px;
    cursor: pointer;
}

.flag-lang {
    width: 30px;
    height: auto;
}

.flag-lang img {
    max-width: 100%;
}

/* Wrapper utama, butuh position relative */

.lang-mobile {
    display: none;
}

.lang-dropdown {
    position: relative;
    cursor: pointer;
    min-width: 90px;
}

/* Penata gaya untuk toggle (yang terlihat) */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    border: 1px solid transparent none;
    border-radius: 6px;
    background: transparent none;
    transition: background-color 0.2s;
}

.lang-toggle:hover {
    background-color: transparent none;
}

/* Penata gaya untuk item di dalam toggle/option */
.lang-toggle .value-lang {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.lang-option .value-lang {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
}

.lang-toggle .flag-lang img,
.lang-option .flag-lang img {
    width: 24px;
    /* Atur ukuran bendera */
    height: auto;
    display: block;
}

/* SVG Chevron */
.lang-toggle .chevron-down {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.lang-toggle .chevron-down svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

.lang-toggle .chevron-down svg path {
    fill: #fff;
}

.lang-toggle .chevron-down.rotate {
    transform: rotate(180deg);
}

/* Menu dropdown (tersembunyi) */
.lang-menu {
    display: none;
    /* Sembunyi secara default */
    position: absolute;
    top: calc(100% + 5px);
    /* Posisikan di bawah toggle */
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 100%;
    /* Lebar minimum sama dengan toggle */
    z-index: 10;
    padding-left: 24px;
}

.lang-menu::before {
    width: 15px;
    height: 15px;
    content: "";
    position: absolute;
    background: var(--gray-100);
    border-radius: 8px;
    border: 1.5px solid var(--gray-300);
    left: 8px;
    top: 10px;
}

/* Opsi di dalam menu */
.lang-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.lang-option:hover {
    background-color: #fff;
}

/* DESKTOP SUBMENU COMPANY START*/

.section {
    padding: 48px 0px;
}

.sub-menu-company {
    display: none;
    /* 1. Sembunyikan dulu */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    background: #fcfcfb;
    min-height: 368px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 45px 16px 36px 16px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

li.dropdown-hover:hover>.sub-menu-company {
    display: flex;
    min-width: 100%;
    margin-left: -0.5px;
}

.dropdown-hover:hover>.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    left: 0px;
    top: 100%;
    width: 100%;
}

.left-submenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.thumbnail-submenu {
    width: 96%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
}

.thumbnail-submenu a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.thumbnail-submenu a img {
    max-width: 100%;
}

.child-title-submenu {
    width: 100%;
    height: auto;
}

.child-title-submenu h3 {
    font: 500 24px/28px var(--font-geist);
    color: var(--gray-950);
    margin-top: 8px;
    margin-bottom: 24px;
    text-align: left;
}

.desc-title-submenu {
    font: normal 400 clamp(0.91rem, 0.7186rem + 0.2991vw, 1.0775rem) var(--font-plus-jakarta);
    color: var(--gray-500);
    padding-bottom: 8px;
    text-align: left;
    padding-right: 15px;
    line-height: 152%;
}

.cta-submenu {
    width: 100%;
    height: auto;
}


.icon-cta-submenu {
    width: 30px;
    height: auto;
}

.cta-submenu a {
    width: 100%;
    text-decoration: none;
    outline: none;
    color: var(--oxford-blue-950);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    margin: 6px 0px;
    text-align: left;
}

.cta-submenu a::before {
    display: none;
}

.right-submenu .cta-submenu a {
    padding: 0px 6px;
}

.cta-submenu a:hover {
    color: var(--aqua-blue-500) !important;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.text-cta-submenu {
    height: auto;
    width: auto;
    padding-right: 10px;
    letter-spacing: -0.14px;
    font: 500 18px/26px var(--font-geist);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    min-width: 210px;
    max-width: 87.24%;
    text-align: left;
}

.text-cta-submenu p {
    margin-bottom: 0px;
}

.icon-cta-submenu svg {
    max-width: 100%;
}

.icon-cta-submenu svg path {
    fill: var(--oxford-blue-950);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.cta-submenu a:hover .icon-cta-submenu svg path {
    fill: var(--aqua-blue-500);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

/* DESKTOP SUBMENU COMPANY END*/

/* DESKTOP SUB MENU PRE IPO START*/
.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small {
    display: block;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    height: auto;
    max-width: 325px;
    min-width: 280px;
    width: auto;
    margin-top: -8px;
}

.dropdown-menu-small {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    background: transparent;
    min-height: 50px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    padding: 10px 0px 24px 0px;
}

.wrp-nav-item ul li .dropdown-menu-small a {
    color: #363636;
    font-size: 14px;
    line-height: 22px;
    font-family: 'Rubik-Medium', sans-serif;
    letter-spacing: 0.35px;
    font-weight: 200;
    padding: 11.5px 16px 12px 16px;
    white-space: unset !important;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small {
    display: block;
    border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
    border-image-slice: 1;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    height: auto;
    max-width: 325px;
    min-width: 260px;
    width: auto;
    margin-top: -18px;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li {
    width: 100%;
    height: auto;
    display: block;
    overflow: unset;
    background: var(--white-one);
    padding: 2px 0px;
    border-bottom: 1px solid var(--gray-100);
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li:last-child {
    border-bottom: 1px solid var(--white-one);
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a {
    white-space: unset;
    color: var(--gray-800);
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:focus,
.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover {
    background: var(--scarlet-red-50);
    color: var(--scarlet-red-600);
}

.left-navbar {
    width: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: flex-start;
    -ms-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

.navbar-align-right {
    width: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.navbar-items-menu ul li.position-relative a::before {
    content: "";
    width: 4px;
    height: 16px;
    background: var(--aqua-blue-500);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 18px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    opacity: 0;
}


.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a {
    position: relative;
}

.navbar-items-menu ul li.position-relative a::before {
    margin-left: unset;
    margin-right: unset;
    left: 1px;
}

.wrp-img-sementara {
    width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 14px;
}

.wrp-nav-item .navbar-nav li:hover>ul li.position-relative a:hover>a::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 10px;
    left: 1px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    opacity: 1;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover {
    color: var(--aqua-blue-500);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.wrp-nav-item .navbar-nav li:hover>ul.dropdown-menu-small li a:hover::before {
    content: "";
    width: 2px;
    height: 16px;
    bottom: 15px;
    left: 1px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    opacity: 1;
    position: absolute;
}

.cta-navbar-right {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
}

.cta-navbar-right a {
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    background: var(--scarlet-red-600);
    padding: 12px 18px 14px 17px;
    min-height: 46px;
    /* border-radius: 8px; */
    box-shadow: 0px 4px 6px 1px rgba(239, 68, 68, 0.25);
    letter-spacing: -0.14px;
    color: var(--white-one);
    text-decoration: none;
}

.wrp-cta-navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    gap: 6px;
}

.text-btn-singleline {
    font: 400 17px/21px var(--font-geist);
}

.icon-btn-singleline {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    padding: 5px 5px;
}

.icon-btn-singleline svg {
    fill: var(--white-one);
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}

/* DESKTOP SUB MENU PRE IPO END*/

/* SECTION THE NUMBER HOME START */
.number-right-home {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}

.title-number-home {
    width: 93%;
}

.subtitle-number-home {
    font: 500 30.24px/37.56px var(--font-geist);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.45px;
}

.title-number-home h2 {
    font: 600 42px/50px var(--font-geist);
    color: var(--gray-800);
}

.subdesc-the-number {
    width: 56.56%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-600);
}

/* SECTION THE NUMBER HOME END */
/* NAVBAR DESKTOP END */


/* PRIMARY CAROUSEL GLOBAL START */

/* Global indicator carousel start */
.hero-section {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden;
    position: relative;
    background: var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

#carouselPrimary .carousel-item {
    height: 100% !important;
    position: relative !important;
    display: block !important;
}

#carouselPrimary {
    height: 100vh !important;
    width: 100vw !important;
    position: relative;
}

/* Slick slider styling */
#carouselPrimary .slick-track,
#carouselPrimary .slick-list {
    height: 100vh !important;
}

.caption-vids {
    width: 100vw;
    background: transparent none;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 15%;
    /* border: 1px solid #cf0000; */
    display: flex;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: end;
    -ms-align-items: end;
    -moz-align-items: end;
    -webkit-align-items: end;
}

.content-caption-hero {
    width: 100%;
}

.container-slide-caption {
    max-width: 1220px;
    margin: 0 auto;
    /* border: 1px solid #purple; */
    width: 100%;
    height: auto;
    padding-bottom: 96px;
    margin-bottom: 136px;
    display: flex;
    justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
}

.text-bg-blur {
    width: 524px;
    height: 156px;
    background-color: hsla(240, 88%, 27%, 0.24);
    background-image:
        radial-gradient(at 46% 58%, hsla(187, 61%, 42%, 1) 0px, transparent 50%),
        radial-gradient(at 39% 20%, hsla(216, 64%, 45%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
        radial-gradient(at 31% 83%, hsla(195, 93%, 28%, 1) 0px, transparent 50%),
        radial-gradient(at 81% 86%, hsla(189, 54%, 53%, 0.56) 0px, transparent 50%);
    border-radius: 59px;
    position: absolute;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    left: -83.24%;
    right: 0;
    bottom: 40%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    -webkit-filter: blur(46px);
    -ms-filter: blur(46px);
    -moz--filter: blur(46px);
    filter: blur(46px);
}

.content-caption-hero h1 {
    font: 500 40px/45px var(--font-geist);
    margin-bottom: 0px;
    color: var(--white-one);
    letter-spacing: -0.58px;
}

.content-caption-hero {
    font: 500 22.24px/29px var(--font-geist);
    color: var(--white-one);
}

.carousel-item {

    height: 100vh !important;
    position: relative !important;
    display: block !important;
}

/* Media: video atau image */
.carousel-item video,
.carousel-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    max-width: 100vw !important;
    width: 100vw;
    height: 100%;
    object-fit: cover !important;
    z-index: 1 !important;
}

/* Caption styling */
.carousel-caption {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 12 !important;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 800px;
}

.carousel-caption h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #034ea1;
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.8);
}

.carousel-caption p {
    font-size: 1.2rem;
    color: #034ea1;
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.8);
}

/* Slick navigation */
.slick-prev,
.slick-next {
    z-index: 10;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.slick-dots {
    bottom: 30px;
    z-index: 7;
}

.slick-dots li button:before {
    color: white;
    opacity: 0.6;
    font-size: 12px;
}

.slick-dots li.slick-active button:before {
    color: #034ea1;
    opacity: 1;
}

#carouselPrimary .slick-prev {
    left: 48px !important;
}

#carouselPrimary .slick-prev::before {
    opacity: 0;
}

#carouselPrimary .slick-prev img {
    width: 18px;
    z-index: 6 !important;
    position: relative;
    margin-right: 12px;
    left: -4px;
    top: -6px;
    opacity: 1 !important;
}

#carouselPrimary .slick-next {
    right: 48px !important;
}

#carouselPrimary .slick-next::before {
    opacity: 0;
}

#carouselPrimary .slick-next img {
    width: 18px;
    z-index: 6 !important;
    position: relative;
    margin-right: 12px;
    left: -4px;
    top: -6px;
    opacity: 1 !important;
    display: block;
}

#carouselPrimary .slick-prev::before,
#carouselPrimary .slick-next::before {
    content: "" !important;
    display: none !important;
}


#carouselPrimary .slick-prev,
#carouselPrimary .slick-next {
    width: 50px;
    height: 50px;
    z-index: 8;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

#carouselPrimary .slick-prev {
    left: 25px;
    background-image: url('../images/icon/arrow-left.svg');
}

#carouselPrimary .slick-prev:hover {
    background: url('../images/icon/arrow-left.svg') rgba(255, 255, 255, 0.48) center no-repeat !important;
    background-size: 24px !important;
}

#carouselPrimary .slick-prev:focus {
    background: url('../images/icon/arrow-left.svg') rgba(255, 255, 255, 0.48) center no-repeat !important;
    background-size: 24px !important;
}

#carouselPrimary .slick-next {
    right: 25px;
    background-image: url('../images/icon/arrow-right.svg');
}

#carouselPrimary .slick-next:hover {
    background: url('../images/icon/arrow-right.svg') rgba(255, 255, 255, 0.48) center no-repeat !important;
    background-size: 24px !important;
}

#carouselPrimary .slick-next:focus {
    background: url('../images/icon/arrow-right.svg') rgba(255, 255, 255, 0.48) center no-repeat !important;
    background-size: 24px !important;
}

/* Hilangkan teks default */
#carouselPrimary .slick-prev:before,
#carouselPrimary .slick-next:before {
    content: '';
}

.register-btn {
    position: relative;
    display: inline-block;
    padding: 19px 56px;
    background: #ffffff;
    color: #e8302a;
    font-weight: 600;
    font-size: 18.5px;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--scarlet-red-600);
    clip-path: polygon(16px 0,
            /* top-left cut */
            100% 0,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            /* bottom-right cut */
            0 100%,
            0 16px);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.register-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
}

.register-btn:active {
    transform: translate(0, 0);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
}

.wrp-hero-content {
    width: 52%;
    height: auto;
}

.cta-hero-content {
    margin-top: 32px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.event-location-hero {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    margin-top: 24px;
}

.right-caption-hero {
    width: 40%;
    height: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.icon-map-event {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.icon-map-event svg {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
    fill: var(--white-one);
}

.location-hero-caption {
    width: auto;
    padding-left: 12px;
    font: 500 22.24px/29px var(--font-geist);
    color: var(--white-one);
}

/* PRIMARY CAROUSEL GLOBAL END */

.section {
    padding: 96px 0px 96px 0px;
}

/*  SECTION ABOUT OVERVIEW HOME START */

.section-about-home {
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    min-height: 75vh;
    position: relative;
    overflow: hidden;
    background: var(--white-one);
}

.title-section-page {
    font: 400 20.64px/27.64px var(--font-geist);
    color: var(--gray-950);
    margin-bottom: 32px;
    position: relative;
    z-index: 3;
}

.title-section-page h2 {
    font: 500 31.24px/37.56px var(--font-geist);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.45px;
}

.content-desc-home {
    color: var(--gray-600);
    font: 400 21px/28px var(--font-geist);
    letter-spacing: -0.32px;
    position: relative;
    z-index: 3;
}

.large-title-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-600);
    padding-right: 74px;
}

.large-title-section h2 {
    font: 500 42px/49px var(--font-geist);
    color: var(--gray-950);
    letter-spacing: -0.6px;
}

.rectangle-danantara {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.wrp-rectangle-danantara {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.danantara-brand-sponsor {
    width: 256px;
    height: auto;
    min-height: 124px;
    position: relative;
    z-index: 3;
}

.danantara-brand-sponsor img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.label-sponsor {
    padding-top: 40px;
    font: normal 400 18.24px/22.64px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    width: 100%;
    height: auto;
}

.glit-ornament-01 {
    position: absolute;
    width: 56px;
    height: auto;
    z-index: 1;
}

.glit-ornament-01 img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


.glit-ornament-02 {
    position: absolute;
    width: 64px;
    height: auto;
    z-index: 1;
}

.glit-ornament-02 img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.glit-ornament-03 {
    position: absolute;
    width: 40px;
    height: auto;
    z-index: 1;
}

.glit-ornament-03 {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.glit-ornament-04 {
    position: absolute;
    width: 32px;
    height: auto;
    z-index: 1;
}

.glit-ornament-04 img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.glit-ornament-05 {
    position: absolute;
    width: 24px;
    height: auto;
    z-index: 1;
}

.glit-ornament-05 img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.glit-ornament-06 {
    position: absolute;
    width: 46px;
    height: auto;
    z-index: 1;
}

.glit-ornament-07 {
    position: absolute;
    width: 46px;
    height: auto;
    z-index: 1;
}

.glit-ornament-06 img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.section-about-home .glit-ornament-01 {
    right: 35%;
    top: 8%;
}

.section-about-home .glit-ornament-02 {
    right: 25%;
    top: 16%;
}

.section-about-home .glit-ornament-03 {
    right: 21%;
    width: 64px;
    top: 64%;
}

.section-about-home .glit-ornament-04 {
    width: 56px;
    right: 0;
    top: 0;
}

.section-about-home .glit-ornament-05 {
    right: 15%;
    top: 42%;
}

.section-about-home .glit-ornament-06 {
    right: 5%;
    top: 78%;
}

.section-about-home .glit-ornament-07 {
    right: 29%;
    width: 64px;
    top: 92%;
}

/* Glitch Ornaments Base & Initial State for GSAP Animation */
.section-about-home [class*="glit-ornament-"] {
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.section-about-home [class*="glit-ornament-"] img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}



/*  SECTION ABOUT OVERVIEW HOME END */

/* SECTION WHY ATTEND HOME START */
.section-why-home {
    background: #f5fafe;
    width: 100%;
    min-height: 76vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-align-items: center;
    -ms-justify-content: center;
    -moz-align-items: center;
    -moz-justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.left-why-attend {
    width: 100%;
}

.title-why-attend {
    width: 100%;
}

.title-why-attend h2 {
    font: 500 42px/49px var(--font-geist);
    color: var(--gray-950);
    letter-spacing: -0.6px;
}

.desc-why-attend {
    font: normal 400 18.24px/22.64px var(--font-geist);
    color: var(--gray-500);
}

.card-why-attend {
    width: 100%;
    padding: 30px 30px;
    background: var(--white-one);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0px 8px 28px rgba(18, 49, 66, 0.03);
}

.wrp-icon-card {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-align-items: center;
    -ms-justify-content: center;
    -moz-align-items: center;
    -moz-justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.icon-why-attend {
    width: 124px;
    height: auto;
}

.icon-why-attend img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.title-why-attend {
    width: 100%;
}

.title-card-attend h2 {
    font: normal 500 28.24px/32.65px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 10px;
    letter-spacing: -0.52px;
    width: fit-content;
}

.right-why-attend {
    width: 100%;
}

.subdesc-why-attend {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-600);
}

.row-section-why {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.cta-red-button {
    margin-top: 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.register-btn-red {
    position: relative;
    display: inline-block;
    padding: 19px 56px;
    background: var(--scarlet-red-600);
    color: var(--white-one);
    font-weight: 600;
    font-size: 18.5px;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--scarlet-red-600);
    clip-path: polygon(16px 0,
            /* top-left cut */
            100% 0,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            /* bottom-right cut */
            0 100%,
            0 16px);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.register-btn-red:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    color: var(--white-one);
}

.register-btn-red:active {
    transform: translate(0, 0);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
    color: var(--white-one);
}

.wrp-horizontal-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0px 0px;
    background: transparent;
    border-radius: 20px;
}

.wrp-fit-content {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 24px;
}

.left-sentence-cta {
    width: fit-content;
}

.left-sentence-cta p {
    font: normal 500 21px/28px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 0px;
    letter-spacing: -0.52px;
}

/* SECTION WHY ATTEND HOME END */

/* SECTION SPEAKER HOME START */
.section-speakers-home {
    background: #f5fafe;
    width: 100%;
    min-height: 76vh;
    height: auto;
    display: flex;
}

.speakers-title-left {
    font: 500 30.24px/37.56px var(--font-geist);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.45px;
}

.desc-speaker-list {
    margin-top: 20px;
    width: 64%;
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-600);
}

.subtitle-number-home {
    font: 500 30.24px/37.56px var(--font-geist);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.45px;
}

.row-small-speakers {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.fit-colum-small-people {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wrp-card-speaker {
    width: fit-content;
    height: auto;
    position: relative;
    /* border: 2px yellow solid; */
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 18px;
}

.left-speaker-list {
    padding: 52px 0px 76px;
    margin-top: -32px;
}


.people-speaker-small {
    position: relative;
}

.people-speaker-small::before {
    content: "";
    width: 146px;
    min-height: 38px;
    height: auto;
    display: block;
    background: linear-gradient(to bottom, rgba(239, 47, 49, 0) 0%, rgba(239, 47, 49, 0.45) 45%, rgba(178, 21, 22, 1) 100%);
    position: absolute;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.teks-after-small-speakers {
    width: 76%;
    font: normal 400 18.64px/22.64px var(--font-geist);
    color: var(--gray-500);
    padding-right: 86px;
}

.people-speaker-small::after {
    content: "";
    width: 146px;
    min-height: 30px;
    height: auto;
    display: block;
    background: linear-gradient(to bottom, rgba(239, 47, 49, .1) 0%, rgba(239, 47, 49, 0.45) 45%, rgba(178, 21, 22, 1) 100%);
    position: absolute;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.speaker-card-small {
    width: fit-content;
    height: auto;
    display: flex;
    justify-content: flex-end;
}

.people-small-red {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 146px;
    max-height: 128px;
    overflow: unset;
    border-radius: 8px;
    background: url(../images/uploads/speakers/bg-speakers-small.jpg) no-repeat bottom center;
    background-size: cover;
    top: 0px;
}

.speaker-name {
    font: 500 17.24px/21px var(--font-geist);
    color: var(--gray-950);
    letter-spacing: -0.24px;
}

.speaker-name-title {
    position: absolute;
    width: 148px;
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    text-align: left;
    color: var(--gray-800);
    font: normal 400 18.32px/22.64px var(--font-geist);
    top: 156px;
}

.wrp-speakers-verticals {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
}

.speaker-title {
    font: 400 14.56px/18px var(--font-geist);
    letter-spacing: -0.24pxx;
    color: var(--gray-500);
}

.speaker-title-large {
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-100);
    padding: 15px 32px 5px 32px;
}

.people-small-red.active {
    border-top: 3.5px var(--scarlet-red-700) solid;
    border-left: 3.5px var(--scarlet-red-700) solid;
    border-right: 3.5px var(--scarlet-red-700) solid;
    border-bottom: 5px var(--scarlet-red-700) solid;
}

.people-speaker-small {
    width: 128px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    bottom: 0;
    left: 0;
}

.people-speaker-small img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.right-speaker-home {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 700px;
    padding: 5px 0px 76px;
    justify-content: flex-end;
}

.card-speaker-large {
    width: 116%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: url(../images/uploads/speakers/bg-speakers-small.jpg) bottom center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: flex-end;
}

.speaker-name-large {
    width: 100%;
    z-index: 4;
    background: var(--scarlet-red-600);
    bottom: 0;
    position: absolute;
}

.speaker-materials {
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-100);
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: start;
}

.speaker-materials {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0px 32px 30px 32px;
}

.wrp-img-speaker {
    position: absolute;
    width: 92%;
}

.wrp-img-speaker img {
    z-index: 2;
    position: relative;
}

.wrp-img-speaker::before {
    content: "";
    width: 120%;
    height: 100%;
    display: block;
    background: #f5fafe;
    background-size: cover;
    position: absolute;
    height: 48px;
    top: -4.5%;
    left: -10%;

}

.speaker- {
    width: 100%;
    height: auto;
    background: var(--scarlet-red-500);
    left: 0;
    padding: 20px 20px 32px 0px;
    z-index: 3;
    width: 100%;
    padding: 15px 32px 10px 32px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    position: absolute;
    font: 500 30.24px/37.56px var(--font-geist);
    color: var(--white-one);
    text-align: left;
    letter-spacing: -0.45px;
}

.name-large {
    width: 100%;
    height: auto;
    background: var(--scarlet-red-600);
    left: 0;
    padding: 20px 20px 32px 0px;
    z-index: 3;
    width: 100%;
    padding: 15px 32px 10px 32px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    font: 500 30.24px/37.56px var(--font-geist);
    color: var(--white-one);
    text-align: left;
    letter-spacing: -0.45px;
}

/* Speaker Carousel Right Sync Styles */
.right-speaker-home {
    position: relative;
    width: 100%;
    min-height: 695px;
    overflow: hidden;
}

.right-speaker-home .card-speaker-large {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 116%;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.right-speaker-home .card-speaker-large.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
}

.speaker-card-small {
    cursor: pointer;
    transition: transform 0.25s ease;
}

.speaker-card-small:hover {
    transform: translateY(-4px);
}

.people-small-red {
    transition: border 0.25s ease, box-shadow 0.25s ease;
}

/* SECTION SPEAKER HOME END */
/* SECTION THE NUMBER HOME START */
.wrp-numbering {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.number-left-home {
    width: 100%;
}

.wrp-card-the-number {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 32px;
    padding-bottom: 32px;
    will-change: transform, opacity;
}

.title-value-number {
    height: auto;
}

.title-value-number h2 {
    font: 600 46px/50px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 0px;
    letter-spacing: -0.56px;
    font-variant-numeric: tabular-nums;
}

.subtitle-desc-number {
    font: 400 21px/28px var(--font-geist);
    color: var(--gray-600);
    width: 61%;
}

/* SECTION THE NUMBER HOME END */
/* FOOTER START */

.site-footer {
    position: relative;
    background-color: var(--tiif-bg);
    background-image: url('../images/ornaments/bg-footer-bottom.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    overflow: hidden;
    padding-top: clamp(48px, 6vw, 90px);
}

.label-title-footer {
    height: auto;
    width: fit-content;
}

.label-title-footer h2 {
    font: 600 20.24px/27.64px var(--font-geist);
    color: var(--gray-800);
    margin-bottom: 18px;
    letter-spacing: -0.40px;
    width: fit-content;
    text-transform: uppercase;
}

.item-link-footer {
    width: 100%;
    height: auto;
    padding: 0px 0px;
}

.item-link-footer ul {
    padding-left: 0px;
    list-style: none;
}

.item-link-footer ul li {
    padding: 8.6px 0px 8.6px 0px;
}

.item-link-footer ul li a {
    font: normal 400 18.64px/22.64px var(--font-geist);
    color: var(--gray-500);
    text-align: left;
    line-height: normal;
    margin-bottom: 0px;
    text-decoration: none;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.email-links-footer {
    width: 100%;
}

.footer-contact-label {
    display: block;
    font-size: 0.85rem;
    color: var(--tiif-muted);
    margin-bottom: 4px;
    font: 400 17px/21px var(--font-geist);
}

.footer-contact-value {
    font: normal 400 18.64px/22.64px var(--font-geist);
    color: var(--gray-900);
    text-decoration: none;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.footer-contact-value:hover {
    color: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.content-copyright {
    font: normal 400 18.24px/22.64px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.content-copyright a {
    color: var(--gray-900);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.content-copyright a:hover {
    color: var(--scarlet-red-600);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.content-copyright p {
    margin-bottom: 0px;
}

.items-ccenter-terms {
    width: 100%;
    display: flex;
    justify-content: end;
    -ms-justify-content: end;
    -moz-justify-content: end;
    -webkit-justify-content: end;
}


.items-ccenter-terms ul {
    list-style: none;
    margin-bottom: 0px;
    width: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    padding-left: 0px;
    gap: 24px;
}


.items-ccenter-terms ul li a {
    font: normal 400 18.24px/22.64px var(--font-geist);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    text-decoration: none;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.items-ccenter-terms ul li a:hover {
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    color: var(--aqua-blue-400);
}

.row-column-email {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    -ms-align-items: flex-start;
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    gap: 24px;
}

.row-copyright {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-top: 86px;
    padding-bottom: 76px;
    margin-bottom: 32px;
}

.row-sign-logo {
    width: 100%;
    height: auto;
    padding: 64px 0px 52px 0px;
    display: flex;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
}

.sign-logo-footer {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
}

.logo-sign-wrapper {
    width: 664px;
    min-height: 124px;
    height: auto;
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
}

.logo-sign-wrapper svg {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
    fill: var(--white-one);
}

/* FOOTER END */