/* ==========================================================================
   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-maven-pro: 'Geist', sans-serif;
    --font-maven-pro: 'Maven Pro', sans-serif;
    --font-cascadia-code: "Cascadia Code", 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-trans-5: rgba(255, 255, 255, 0.5);
    --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: #e5101b;
    /* 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;
}


body.unscrolled {
    overflow-y: hidden !important;
}

/* 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: 20;
    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-maven-pro);
    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-maven-pro);
    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);
    }
}

.dark-bg-blur {
    width: 632px;
    height: 136px;
    background-color: hsla(240, 88%, 27%, 0.24);
    background-image:
        radial-gradient(at 46% 58%, rgb(6, 5, 24) 0px, transparent 40%),
        radial-gradient(at 39% 20%, rgb(5, 13, 34) 0px, transparent 40%),
        radial-gradient(at 80% 0%, rgb(6, 18, 48) 0px, transparent 40%),
        radial-gradient(at 31% 83%, rgb(16, 36, 75) 0px, transparent 40%),
        radial-gradient(at 81% 86%, hsla(244, 67%, 38%, 0.747) 0px, transparent 40%);
    border-radius: 59px;
    position: absolute;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    left: -23.24%;
    right: 0;
    bottom: 19%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    -webkit-filter: blur(40px);
    -ms-filter: blur(40px);
    -moz--filter: blur(40px);
    filter: blur(40px);

}

.count-down-hero {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* border: 1px solid var(--gray-100); */
    min-height: 86px;
    flex-direction: column;
    position: relative;
    z-index: 4;
    row-gap: 16px;
}

.date-starting-time {
    font: 500 22.24px/29px var(--font-maven-pro);
    color: var(--white-one);
}

.wrp-count-time {
    display: flex;
    align-items: center;
}

.count-timer-hero {
    width: 100%;
    gap: 24px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    /* border: 1px solid #cf0; */
    min-height: 24px;
    justify-content: flex-end;
}

.col-time {
    width: 25%;
    height: auto;
    padding: 15px 24px;
    font: 500 22.24px/29px var(--font-maven-pro);
    color: var(--white-one);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.wrp-date-col {
    font: 500 42px/49px var(--font-maven-pro);
    margin-bottom: 0px;
    color: var(--white-one);
    letter-spacing: -0.58px;
    text-align: center;
}

.wrp-date-text {
    font: 500 20.24px/24px var(--font-cascadia-code);
    color: var(--white-one);
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: -0.46px;
}

.pulse-label {
    display: flex;
}

.pulse-wrapper .pulse-label i {
    position: relative;
    top: 5px;
    left: 5px;
}

.wrp-date-starting {
    display: flex;
    align-items: center;
    width: fit-content;
    justify-content: flex-end;
    gap: 20px;
}

.pulse {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef2f31;
    box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
    animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(206, 34, 34, 0.6);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(135, 200, 38, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(135, 200, 38, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(206, 34, 34, 0.6);
        box-shadow: 0 0 0 0 rgba(206, 34, 34, 0.6);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(135, 200, 38, 0);
        box-shadow: 0 0 0 10px rgba(135, 200, 38, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(135, 200, 38, 0);
        box-shadow: 0 0 0 0 rgba(135, 200, 38, 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-maven-pro);
    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-maven-pro);
}

.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-maven-pro);
}

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

.burger-mobile {
    display: none;
}

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

.icon-search {
    margin-right: 10px;
    width: 40px;
    height: 40px;
    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 svg {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-search svg path.cls-2 {
    fill: var(--scarlet-red-500);
}

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

.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%;
}


.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/uploads/icons/caret-arrow-down-black.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(--gray-800);
    font-size: 17px;
    line-height: 28px;
    font-family: var(--font-maven-pro);
    font-weight: 400;
    letter-spacing: 0.4px;
    text-align: left;
    border: 0px !important;
}

#dropdownLangdesk::before {
    width: 1px;
    height: 21px;
    background: var(--gray-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(--scarlet-red-700);
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-right: 5px;
}

.dropdown-item.active .check-icon {
    opacity: 1;
    fill: var(--scarlet-red-700) !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/uploads/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-maven-pro);
    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-maven-pro);
    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-maven-pro);
    -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*/


/* DIALOG SEARCH START */
.dialog-search {
    display: block;
    position: fixed;
    top: 20%;
    left: 0;
    width: 70%;
    height: 70%;
    background-color: #fff;
    z-index: 19;
    overflow-y: auto;
    padding: 20px;
}

.form-search {
    width: 100%;
    height: auto;
    margin-top: 40px;
    margin-bottom: 24px;
    font-size: 32px;
}

.form-search input::-webkit-input-placeholder {
    color: var(--gray-300);
}

.form-search input::-moz-placeholder {
    color: var(--gray-300);
}

.form-search input:-ms-input-placeholder {
    color: var(--gray-300);
}

.form-search input::placeholder {
    color: var(--gray-300);
}

.form-search input {
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #98a1ae;
    padding: 8px 12px;
    outline: none;
    background-color: #fcfcfb;
    border-radius: 0px;
}


.search-general {
    width: 100%;
    height: 100%;
    position: fixed;
    /* z-index: 19; */
    z-index: 100;
    display: none;
    top: 0px;
}

.container-search-transparent {
    position: fixed;
    top: -9999px;
    left: -9999px;
    top: 0px;
    left: 0px;
    visibility: hidden;
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    /* overflow: hidden; */
    width: 100%;
    height: 100vh;
    z-index: 8;
}

.search-content-form {
    width: 100%;
    background: #fff;
    margin-top: -82px;
    text-align: center;
    padding: 25px 0px;
    opacity: 0;
    -webkit-transform: translateY(-0px);
    -moz-transform: translateY(-0px);
    -o-transform: translateY(-0px);
    -ms-transform: translateY(-0px);
    transform: translateY(-0px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 999;
    -webkit-box-shadow: 0px 7px 14px -6px #123a38;
    -moz-box-shadow: 0px 7px 14px -6px #123a38;
    box-shadow: 0px 7px 14px -6px #123a38;
    position: absolute;
}

.search-content-form-active {
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-top: 0px;
    text-align: center;
    padding: 18px 20px;
    opacity: 1;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 100;
    -webkit-box-shadow: 0px 7px 14px -6px #123a38;
    -moz-box-shadow: 0px 7px 14px -6px #123a38;
    box-shadow: 0px 7px 14px -6px #123a38;
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4.6px;
}

.container-search-transparent.active {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: visible;
    opacity: 1;
}

.search-page {
    height: auto;
}

.search-page input.form-control {
    font: normal 400 24.24px/31.64px var(--font-maven-pro);
    height: 60px;
    border: 1.5px solid var(--gray-200);
    padding: 15px 18px 15px 20px;
}

.search-page input.form-control:focus {
    box-shadow: none !important;
    border: 1.5px solid var(--gray-400);
}

.search-page input.form-control::placeholder {
    color: var(--gray-400)
}

.search-ev {
    width: 100%;
    height: auto;
    padding-right: 0px;
    margin-top: 45px;
}

.search-ev img {
    position: absolute;
    right: 0px;
    top: 12px;
    cursor: pointer;
}

.btn-submit-search {
    background: var(--blue-two);
    color: #fff;
    padding: 11.24px 30px;
    border-color: var(--blue-two);
    font: normal 400 14.64px/29.64px var(--font-maven-pro);
    letter-spacing: 0.5px;
    border-radius: 0px 6.64px 6.64px 0px;
}


.card-search-dialog {
    background: #fff;
    width: 1260px;
    min-height: 186px;
    border-radius: 12.46px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 125px;
    padding: 32px 36px;
    z-index: 7;
}


.relative-type-search {
    width: 100%;
    /* height: 93vh; */
    height: 54vh;
    position: relative;
    min-height: 1.5px;
    display: none;
    background: #fff;
    margin-top: -1px;
    z-index: 1;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;

    &::-webkit-scrollbar {
        width: 5px;
    }

    &::-webkit-scrollbar-track {
        background-color: #eceef2;
        border-radius: 180px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #9b9b9b;
        border-radius: 180px;
    }

}


.relative-type-search::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 8px;
    background: var(--blue-700);
    border-radius: 10px;
}

.wrp-type-sugestion {
    width: 100%;
    height: auto;
    min-height: 224px;
    background: #fff;
    position: absolute;
    z-index: 10;
}

.wrp-list-type {
    width: 100%;
    height: auto;
    padding: 0px 0px 0px 0px;
    min-height: 225px;
}

.large-card-type {
    width: 100%;
    padding: 10px 0px;
    border-radius: 12.5px;
    border: 1px solid var(--grey-two);
    margin-top: 1px;
}

.label-search-form {
    width: 100%;
    height: auto;
    position: absolute;
    left: 36px;
    top: 32px;
    text-align: left;
}

.label-search-form h4 {
    font: normal 700 17.64px/26.64px var(--font-maven-pro);
    color: var(--black-100);
    margin-bottom: 15px;
}

.label-list-type {
    width: 100%;
    background: #f5f5f5;
    min-height: 32px;
    color: #76767e;
    padding: 6px 18px 10px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    font: normal 400 13px/20.64px var(--font-maven-pro);
}

.type-list-link {
    width: 100%;
    height: auto;
}

.type-list-link a {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    background: #fff;
    padding: 6.4px 18px 7.6px 18px;
    text-decoration: none;
    outline: none;
}

.type-list-link a:hover {
    background: #eff3f4;
}

.icon-type-left {
    width: 24px;
    height: 24px;
}

.state-first-type svg {
    max-width: 100%;
}

.state-first-type svg path.st0 {
    /* fill: var(--grey-three); */
    fill: #0D49BD;
}

.state-first-type svg path.st1 {
    fill: #FFFFFF;
}

.state-first-type svg path.st2 {
    fill: #0653D9;
}

.state-first-type svg path.st3 {
    fill: #C73044;
}

.state-last-type svg {
    max-width: 100%;
}

.state-last-type svg path.st0 {
    /* fill: var(--grey-three); */
    fill: #59C059;
}

.state-last-type svg path.st1 {
    /* fill: var(--grey-three); */
    fill: #fff;
}


#box-search {
    width: 100%;
    height: 100%;
}

.close-box-search,
.close-box-donate,
.close-act-form {
    width: auto;
    height: auto;
    background: var(--white-one);
    cursor: pointer;
    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;
    right: 40px;
    top: 20px;
    position: unset;
}

.close-x-bar {
    width: 32px;
    height: auto;
}

.close-x-bar svg {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}

.close-box-search svg {
    max-width: 100%;
}

.close-box-search svg,
.close-box-donate svg,
.close-act-form svg {
    width: 32px;
    max-width: 100%;
}


.close-people-bar {
    width: 32px;
    height: auto;
    cursor: pointer;
}

.close-people-bar svg {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}


.close-box-donate svg path.st0,
.close-act-form svg path.st0 {
    fill: var(--black-30);
}


.close-box-donate svg g path.st0,
.close-act-form svg g path.st0 {
    fill: var(--black-30);
}


#close-box-services,
.close-box-donate,
.close-act-form {
    width: 32px;
    height: 32px;
    padding: 10px 10px;
    border-radius: 50%;
    background: var(--white-one);
    border: 1px solid var(--black-30);
    cursor: pointer;
    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;
    right: 20px;
    top: 24px;
    position: absolute;
}

#close-box-services svg,
.close-box-donate svg,
.close-act-form svg {
    width: 19px;
    max-width: 100%;
}

#close-box-services svg path.st0,
.close-box-donate svg path.st0,
.close-act-form svg path.st0 {
    fill: var(--black-30);
}

#close-box-services svg g path.st0,
.close-box-donate svg g path.st0,
.close-act-form svg g path.st0 {
    fill: var(--black-30);
}


.text-type-search {
    min-width: 76%;
    max-width: 90.52%;
    height: auto;
    padding: 3px 14px 3px 12px;
    font: normal 500 16.64px/21.64px var(--font-maven-pro);
    border-radius: 2.6px;
    text-align: left;
    color: var(--gray-800);
    word-break: break-word;
    /* white-space: pre-line; */
    white-space: wrap;
    overflow-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-height: 50.24px;
    overflow-y: hidden;

}

.icon-type-loader {
    display: inline-block;
    width: 16px;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #dddbdd;
    border-radius: 3.6px;
}

.icon-type-loader::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}

.type-list-link a:nth-of-type(odd) .text-type-search .type-search-loader {
    width: 86%;
}

.type-list-link a:nth-of-type(even) .text-type-search .type-search-loader {
    width: 90%;
}

.type-search-loader {
    display: inline-block;
    width: 90%;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #dddbdd;
    border-radius: 3.5px;
}

.type-search-loader::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: search-shimmer 2.5s infinite;
    animation: search-shimmer 2.5s infinite;
    content: "";
}

.btn-submit-search {
    /* background: var(--aqua-blue-500); */
    background: var(--scarlet-red-600);
    color: #fff;
    padding: 15px 30px;
    /* border-color: var(--aqua-blue-500); */
    border-color: var(--scarlet-red-700);
    font: normal 400 13.64px/27.64px var(--font-maven-pro);
    letter-spacing: 0.5px;
    border-top-right-radius: 4.6px;
    border-bottom-right-radius: 4.6px;
}

.btn-submit-search:hover {
    /* background: var(--aqua-blue-500); */
    background: var(--scarlet-red-600);
    color: #fff;
    /* border-color: var(--aqua-blue-500); */
    border-color: var(--scarlet-red-600);
    outline: none;
}

.row.gutter-search-branch .col-md-4 .btn-submit-search {
    border-radius: 5px;
    padding: 12.5px 30px;
}

.btn-submit-search:focus {
    /* background: var(--aqua-blue-500); */
    background: var(--aqua-blue-800);
    color: #fff;
    /* border-color: var(--aqua-blue-500); */
    border-color: var(--aqua-blue-800);
    outline: none;
}

@-webkit-keyframes search-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes search-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.icon-search-btn {
    width: 24px;
    height: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 3px 3px;
}

.icon-search-btn svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    fill: #fff;
}

.icon-text-search {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
}

.text-search-btn {
    width: auto;
    padding-left: 5px;
}

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

.search-page input.form-control:focus {
    box-shadow: none !important;
    border: 1.5px solid var(--gray-200);
}

.more-seacrh-bar {
    width: 100%;
    min-height: 44px;
    border: 1px solid #fff;
    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;
    padding-left: 18px;
    padding-right: 18px;
    margin-top: 10px;
    margin-bottom: 16px;
}

.more-seacrh-bar a {
    background: var(--aqua-blue-500);
    width: 100%;
    text-decoration: none;
    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;
    color: #fff;
    border-radius: 6.4px;
    padding: 11.6px 7.6px;
}

.more-seacrh-bar a:hover {
    background: var(--aqua-blue-500);
    color: #fff;
}

.text-link-more {
    padding-right: 8px;
}

.more-seacrh-bar a .chevron-right-next svg .st0 {
    fill: #fff !important;
}

.brand-identity {
    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;
}

.brand-identity 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;
}

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

.card-search-link {
    background: #fff;
    width: 1260px;
    min-height: 186px;
    border-radius: 12.46px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 314px;
    padding: 32px 36px;
    z-index: 3;
}

.card-search-link .title-all-menu {
    position: relative;
    overflow: unset;
    margin-bottom: 32px;
    text-align: left;
}

.card-search-link .title-all-menu::before {
    position: absolute;
    content: "";
    width: 24px;
    height: 4.6px;
    background: var(--scarlet-red-600);
    left: 0px;
    bottom: -18px;
}

.item-chevron-right {
    font: normal 400 clamp(0.91rem, 0.7186rem + 0.2991vw, 1.0775rem) var(--font-plus-jakarta);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    line-height: 138%;
}

.icon-18 {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    margin-top: 1.4px;
    transform: rotate(270deg);
    padding: 2.5px;
}

.content-item-menu ul li a.item-chevron-right .icon-18 svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    fill: var(--gray-700);
}

.content-item-menu ul {
    padding-left: 0px;
}

.content-item-menu ul li {
    padding: 8.6px 0px 8.6px 0px;
    list-style: none;
    margin-left: -3px;
    margin-bottom: 10px;
    line-height: 135%;
    list-style: none;
}

.item-chevron-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font: normal 400 clamp(0.91rem, 0.7186rem + 0.2991vw, 1.0775rem) var(--font-plus-jakarta);
    color: var(--gray-500);
    letter-spacing: 0.24px;
    text-decoration: none;
    line-height: 138%;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

/* DIALOG SEARCH 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 20px 14px 19px;
    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;
}

.wrp-circle-avatar {
    width: fit-content;
    max-width: 52%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.list-avatar {
    display: flex;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    padding-right: 36px;
    position: relative;
}

.plus-speaker {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--scarlet-red-600);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff;
    color: var(--white-one);
    text-align: center;
    z-index: 4;
    left: -18px;
}

.plus-speaker a {
    text-decoration: none;
    outline: none;
    color: var(--white-one);
}

.plus-speaker a:hover {
    text-decoration: none;
    outline: none;
}

.plus-speaker a:hover {
    text-decoration: none;
    outline: none;
}

.avatar-people {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--gray-300);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff;
}

.avatar-people img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-people:nth-child(1) {
    z-index: 1;
}

.avatar-people:nth-child(2),
.avatar-people:nth-child(3),
.avatar-people:nth-child(4),
.avatar-people:nth-child(5),
.avatar-people:nth-child(6) {
    z-index: 2;
}

.avatar-people:not(:first-child) {
    margin-left: -18px;
}

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

.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-maven-pro);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.45px;
}

.title-number-home h2 {
    font: 600 42px/50px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.64px;
}

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

/* SECTION THE NUMBER HOME END */

.navbar-desc .cmw-container.navbar-solid {
    width: 95%;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
    margin-right: auto;
    margin-left: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    max-width: 1336px;
}


/* 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; */
    max-width: 1330px;
    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: 632px;
    height: 156px;
    background-color: hsla(240, 88%, 27%, 0.24);
    background-image:
        radial-gradient(at 46% 58%, rgb(172, 42, 49) 0px, transparent 50%),
        radial-gradient(at 39% 20%, rgb(188, 41, 41) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgb(255, 31, 31) 0px, transparent 50%),
        radial-gradient(at 31% 83%, rgb(119, 3, 3) 0px, transparent 50%),
        radial-gradient(at 81% 86%, hsla(0, 54%, 53%, 0.692) 0px, transparent 50%);
    border-radius: 59px;
    position: absolute;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    left: -83.24%;
    right: 0;
    bottom: 18%;
    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);
}

.home-ornament-webbing-one {
    width: 64px;
    height: 64px;
    background: url(../images/ornaments/webbing-ornament-004.png) top center no-repeat;
    background-size: auto;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: 1.5%;
    bottom: 24%;
    z-index: 5;
}

.home-ornament-webbing-two {
    width: 64px;
    height: 64px;
    background: url(../images/ornaments/webbing-ornament-005.png) top center no-repeat;
    background-size: auto;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: 3.2%;
    bottom: 4.5%;
    z-index: 5;
}

.home-ornament-webbing-three {
    width: 64px;
    height: 64px;
    background: url(../images/ornaments/webbing-ornament-003.png) top center no-repeat;
    background-size: auto;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: 22.24%;
    bottom: 9.14%;
    z-index: 5;
}

.wavy-blur-one {
    width: 1076px;
    height: 396px;
    background: url(../images/uploads/primary-carousel/ornament-blur-caption-01.png) top center no-repeat;
    background-size: auto;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: 0;
    bottom: 0;
    z-index: 4;
    /* border: 1px solid #cf0; */
}

.wavy-blur-two {
    width: 1006px;
    height: 336px;
    background: url(../images/uploads/primary-carousel/ornament-blur-caption-02.png) top center no-repeat;
    background-size: auto;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: 0;
    bottom: 17%;
    z-index: 5;
}

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

.content-caption-hero {
    font: 500 22.24px/29px var(--font-maven-pro);
    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; */
    padding: 19px 30px;
    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;
    position: relative;
}

.cta-hero-content a::before {
    content: "";
    width: 26px;
    height: 2.5px;
    background: var(--scarlet-red-600);
    position: absolute;
    left: -4px;
    rotate: calc(-43deg);
    top: 2px;
}

.cta-hero-content a::after {
    content: "";
    width: 24px;
    height: 2.5px;
    background: var(--scarlet-red-600);
    position: absolute;
    right: -6px;
    top: unset;
    bottom: 5.5px;
    rotate: calc(-43deg);
}

.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-maven-pro);
    color: var(--white-one);
}

/* COUNTDOWN TIME START */
.section-countdown-home {
    padding: 40px 0 60px 0;
}

.right-caption-hero {
    justify-content: flex-end;
    align-items: end;
}

.counter-bg {
    position: absolute;
    z-index: -1;
    width: 96px;
    height: auto;
}

.counter-bg svg {
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}

.counter-bg svg .cls-1 {
    fill: var(--white-one);
}

.counter-bg svg .cls-2 {
    fill: var(--gray-900);
    opacity: 0.4;
    filter: blur(16px);
}

.countdown-container {
    background: var(--white-one);
    /* border: 1px solid var(--gray-200); */
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    color: var(--gray-900);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.countdown-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.countdown-badge {
    display: inline-block;
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--scarlet-red-600);
    background: var(--scarlet-red-50);
    border: 1px solid var(--scarlet-red-200);
    padding: 4px 12px;
    border-radius: 20px;
}

.countdown-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: 0.5px;
}

.countdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.countdown-box {
    flex: 1;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 14px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.countdown-box:hover {
    transform: translateY(-2px);
    border-color: var(--scarlet-red-400);
    background: var(--scarlet-red-50);
}

.countdown-number {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--scarlet-red-600);
    font-family: var(--font-cascadia-code), Consolas, Monaco, monospace, sans-serif;
    text-shadow: none;
}

.countdown-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 1px;
    margin-top: 6px;
    text-transform: uppercase;
}

.countdown-separator {
    font-size: 24px;
    font-weight: 700;
    color: var(--scarlet-red-600);
    line-height: 1;
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .right-caption-hero {
        width: 100%;
        justify-content: center;
        margin-top: 24px;
    }

    .countdown-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .countdown-number {
        font-size: 22px;
    }

    .countdown-label {
        font-size: 8.5px;
    }

    .countdown-separator {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .countdown-container {
        padding: 16px 12px;
    }
}

/* COUNTDOWN TIME END */
/* 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) url(../images/ornaments/section-about-bg.jpg);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

.section-number-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) url(../images/ornaments/section-about-bg.jpg);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

.section-number-home::before {
    width: 100%;
    height: auto;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    min-height: 108px;
    background: var(--white-one) url(../images/ornaments/section-countdown-bg.jpg);
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.section-the-expect {
    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) url(../images/ornaments/section-about-bg.jpg);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

.section-the-expect::before {
    width: 100%;
    height: auto;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    min-height: 108px;
    background: var(--white-one) url(../images/ornaments/section-countdown-bg.jpg);
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
}

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

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

.content-desc-home {
    color: var(--gray-600);
    font: 400 21px/28px var(--font-maven-pro);
    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-maven-pro);
    color: var(--gray-600);
    padding-right: 98px;
}

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

.large-title-section h2 span {
    color: var(--scarlet-red-600);
}

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

.white-logo-brand {
    width: 164px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 15%;
    z-index: 3;
}

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

.thumbnail-section-about {
    width: 100%;
    min-height: 124px;
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
}

.thumbnail-section-about img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.wrp-rectangle-danantara {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    /* background: var(--gray-200); */
    background: linear-gradient(to right, rgba(226, 229, 233, 1) 0%, rgba(251, 251, 251, 1) 99%);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 24px 24px 30px 24px;
}

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

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

.label-sponsor {
    padding-top: 40px;
    font: 500 21px/28px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.24px;
    width: 100%;
    height: auto;
}

.wrp-rectangle-danantara .label-sponsor {
    padding-top: 0px;
    position: relative;
    bottom: -2px;
}

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

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

.readmore-ghost {
    width: fit-content;
    height: auto;
    padding-top: 32px;
}

.readmore-ghost .arrow-back-navigation .link--arrowed {
    color: var(--scarlet-red-600);
    font: 400 20.64px/23.64px var(--font-cascadia-code);
    width: fit-content;
    padding-left: 0;
    padding-right: 46px;
    position: relative;
}

.readmore-ghost .arrow-back-navigation .link--arrowed .arrow-icon {
    position: absolute;
    top: -1px;
    left: unset;
    right: 0;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
    transform: rotateX(180deg);
}

.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%;
    display: flex;
    justify-content: center;
}

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

.desc-why-attend {
    font: normal 400 18.24px/22.64px var(--font-maven-pro);
    color: var(--gray-500);
    text-align: center;
}

.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);
}

.card-why-attend {
    width: 100%;
    padding: 30px 30px;
    background: var(--white-one);
    border-radius: 8px;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 8px 28px rgba(18, 49, 66, 0.03);
    margin-bottom: 18px;
    align-items: center;
    text-align: left;
}

#about .card-why-attend {
    width: 100%;
    padding: 30px 30px;
    background: var(--white-one);
    border-radius: 8px;
    min-height: 286px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 8px 28px rgba(18, 49, 66, 0.03);
    margin-bottom: 18px;
    align-items: center;
    text-align: left;
}

.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-maven-pro);
    color: var(--gray-800);
    margin-bottom: 10px;
    letter-spacing: -0.52px;
    width: fit-content;
    text-align: center !important;
}

/* Key Focus Areas cards (About page) — justify the text inside the six boxes */
#about .section-why-home .card-why-attend .title-card-attend h2 {
    text-align: justify;
    width: 100%;
}

#about .card-why-attend .title-card-attend {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
}

#about .card-why-attend .title-card-attend h2 {
    text-align: center !important;
}

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

.subdesc-why-attend {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-maven-pro);
    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; */
    /* padding: 19px 30px; */
    padding: 13px 32px;
    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-maven-pro);
    color: var(--gray-800);
    margin-bottom: 0px;
    letter-spacing: -0.52px;
}

/* SECTION WHY ATTEND HOME END */


/* COUNTDOWN HOME START */
.section-countdown-home {
    position: relative;
    /* Wajib agar absolute di dalam ::before mengikutinya */
    background-color: hsla(356, 70%, 26%, 1);
    background-image: radial-gradient(at 14% 52%, hsla(347, 100%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 29% 13%, hsla(355, 78%, 32%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(356, 79%, 18%, 1) 0px, transparent 50%),
        radial-gradient(at 42% 43%, hsla(351, 100%, 16%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 50%, hsla(355, 80%, 17%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(355, 100%, 27%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(355, 85%, 21%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 78%, 41%, 1) 0px, transparent 50%);
    background-blend-mode: overlay;
    opacity: 1;
    /* Gradient radial kamu tetap aman di background utama div ini */
}

/* Layer khusus untuk mengontrol opacity si gambar PNG ornamen */
.section-countdown-home::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Sama dengan top:0, left:0, width:100%, height:100% */
    background-image: url(../images/ornaments/patter-ornate-crimson-pixel-floral-frame.png);
    background-repeat: repeat-x;
    background-size: 480px;
    background-position: center;
    background-blend-mode: overlay !important;
    opacity: 0.32;
    /* Atur tingkat transparansi khusus PNG di sini! */
    z-index: 1;
    /* Supaya ada di atas background utama tapi di bawah teks */
    pointer-events: none;
    /* Supaya tidak sengaja ke-klik oleh mouse */
}

/* Pastikan teks/konten di dalam section ini diberi z-index lebih tinggi */
.section-countdown-home>* {
    position: relative;
    z-index: 2;
}

.section-countdown-home .title-why-attend h2 {
    color: var(--white-one);
}

.title-why-attend h2 span {
    color: var(--scarlet-red-600);
}

.section-countdown-home .title-section-page h2 {
    color: var(--white-one);
}

/* COUNTDOWN HOME END */

/* SECTION NEW COUNTDOWN START */
.section-new-countdown {
    background: url(../images/ornaments/section-countdown-bg.jpg) no-repeat bottom center;
    background-size: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 15px;
}

.section-new-countdown>* {
    position: relative;
    z-index: 1;
}

.card-red-tranform {
    width: 96%;
    min-height: 68vh;
    padding: 56px 0px;
    margin: 0 auto;
    height: auto;
    border-radius: 18px;
    margin-bottom: 16px;
    background: #e5101b;
    display: flex;
    align-items: center;
    max-width: 100%;
    will-change: width;
}

.card-red-tranform .center-container {
    box-sizing: border-box;
    will-change: padding-left, padding-right;
}


.fixed-container {
    max-width: 1232px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .card-red-tranform .center-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 767px) {
    .card-red-tranform .center-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .fixed-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.title-countdown-white {
    height: auto;
}

.title-countdown-white h2 {
    color: var(--white-one);
    font: 500 42px/49px var(--font-maven-pro);
    letter-spacing: -0.6px;
}

.label-text-cta {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.small-labeltext-cta {
    color: var(--white-one);
    font: 400 18px/22px var(--font-maven-pro);
    letter-spacing: -0.24px;
}

.uppercase-labeltext-cta {
    color: var(--white-one);
    font: 400 16px/20px var(--font-maven-pro);
    letter-spacing: -0.24px;
    text-transform: uppercase;
    padding-right: 36px;
    width: fit-content;
}

.cta-countdown {
    width: 100%;
    display: flex;
}

.row-cta-countdown {
    display: flex;
    align-items: end;
}

.wrp-card-countdown {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 24px 20px 24px 20px;
    border: 1px solid var(--white-one);
    border-radius: 8px;
    margin-top: 48px;
}

.col-counter {
    width: 24%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.dots-separator {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-one);
    font: 500 56px/59px var(--font-maven-pro);
    letter-spacing: -0.6px;
}

.number-of-counter {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-one);
    font: 500 56px/59px var(--font-maven-pro);
    letter-spacing: -0.6px;
}

.counter-time-day {
    font: 400 30px/32.56px var(--font-maven-pro);
    color: var(--white-one);
}


.icon-info {
    width: 24px;
    height: auto;
}

.icon-info svg {
    fill: var(--white-one);
}

.inform-label {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 0px;
}

.label-icon-info {
    color: var(--white-one);
    font: 400 18px/22px var(--font-maven-pro);
    letter-spacing: -0.24px;
}

/* SECTION NEW COUNTDOWN END */

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

.speakers-title-left {
    font: 500 30.24px/37.56px var(--font-maven-pro);
    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-maven-pro);
    color: var(--gray-600);
}

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

.title-number-home h2 span {
    color: var(--scarlet-red-600);
}

.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;
}

.speaker-flex {
    height: auto;
}

.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-maven-pro);
    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-maven-pro);
    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-maven-pro);
    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-maven-pro);
    letter-spacing: -0.24pxx;
    color: var(--gray-500);
}

.speaker-title-large {
    font: 400 21px/28px var(--font-maven-pro);
    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;
}

.title-mobile-speaker {
    display: none;
}

.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;
}

.triangle-ornament-top-right {
    width: 0;
    height: 0;
    border-top-width: 324px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 265px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    top: -24%;
    right: -5%;
    z-index: 4;
    rotate: 180deg;
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.triangle-ornament-bottom-left {
    width: 0;
    height: 0;
    border-top-width: 324px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 265px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    top: 28%;
    right: 85%;
    z-index: 4;
    rotate: 180deg;
    transform: scaleX(1);
    -ms-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.triangle-ornament-center-right {
    width: 0;
    height: 0;
    border-top-width: 100px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 115px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    top: 21%;
    right: -9.5%;
    z-index: 4;
    rotate: -90deg;
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.glitch-ornament-faded-1 {
    width: 74px;
    height: 74px;
    position: absolute;
    z-index: 4;
    bottom: 44%;
    right: -32px;
}

.glitch-ornament-faded-1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.triangle-ornament-bottom-right {
    width: 0;
    height: 0;
    border-top-width: 224px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 200px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    bottom: -4%;
    right: -5%;
    z-index: 4;
    rotate: 360deg;
    transform: scaleY(1);
    -ms-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
}

.speaker-name-large {
    width: 100%;
    z-index: 4;
    background: var(--scarlet-red-600);
    bottom: 0;
    position: absolute;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.55s ease 0.1s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: opacity, transform;
}

.card-speaker-large.active .speaker-name-large {
    opacity: 1;
    transform: translateY(0);
}

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

.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%;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.card-speaker-large.active .wrp-img-speaker {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.wrp-img-speaker img {
    z-index: 2;
    position: relative;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.06s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
    will-change: opacity, transform;
}

.card-speaker-large.active .wrp-img-speaker img {
    opacity: 1;
    transform: scale(1);
}

.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-maven-pro);
    color: var(--white-one);
    text-align: left;
    letter-spacing: -0.45px;
}

.name-large {
    width: 100%;
    height: auto;
    background: var(--scarlet-red-600);
    left: 0;
    z-index: 3;
    width: 100%;
    padding: 18px 32px 0px 32px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    font: 500 30.24px/37.56px var(--font-maven-pro);
    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-x: unset;
    border-bottom-left-radius: 16px;
}

.right-speaker-home .card-speaker-large {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 116%;
    z-index: 1;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

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

.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-maven-pro);
    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-cascadia-code);
    color: var(--gray-600);
    width: 82%;
    letter-spacing: -0.76px;
}

/* SECTION THE NUMBER HOME END */

/* SECTION THE EXPECT START */
.subdesc-the-expect {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
}

.aligner-the-expect {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: end;
    gap: 24px;
    min-height: 206px;
}

.card-expect {
    display: flex;
    width: 100%;
    min-height: 380px;
    height: auto;
    padding: 46px 32px;
    padding-top: 40px;
    font: normal 400 18.24px/22.64px var(--font-maven-pro);
    color: var(--gray-500);
    letter-spacing: -0.24px;
    border-radius: 4px;
    border: 2px solid #ede3e9;
    clip-path: polygon(52px 0,
            /* top-left cut */
            100% 0,
            100% calc(100% - 52px),
            calc(100% - 52px) 100%,
            /* bottom-right cut */
            0 100%,
            0 52px);
    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;
    position: relative;
    background-color: hsla(348, 100%, 99%, 1);
    background-image:
        radial-gradient(at 37% 3%, hsla(356, 100%, 87%, 1) 0px, transparent 50%),
        radial-gradient(at 13% 66%, hsla(356, 100%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 74% 43%, hsla(356, 100%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 11% 17%, hsla(356, 50%, 88%, 1) 0px, transparent 50%),
        radial-gradient(at 95% 4%, hsla(0, 100%, 80%, 1) 0px, transparent 50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* .card-expect:hover, */
.card-expect.active {
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 50% 100%, hsla(356, 75%, 30%, 1) 0px, transparent 50%), radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(359, 79%, 20%, 1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%), radial-gradient(at 51% 39%, hsla(356, 86%, 48%, 1) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%), radial-gradient(at 80% 98%, hsla(359, 79%, 20%, 1) 0px, transparent 50%), radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
    color: var(--white-one);
}

/* .card-expect:hover .title-expect-card h2, */
.card-expect.active .title-expect-card h2 {
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: var(--white-one);
}

/* .card-expect:hover .desc-expect-content, */
.card-expect.active .desc-expect-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: var(--white-one);
}

.wrp-title-expect-icon {
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-right: 6px;
}

.expect-icon {
    width: 76px;
    height: auto;
}

.expect-icon svg {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-expect::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 138px;
    height: 2px;
    z-index: 2;
    background: #ede3e9;
    transform: rotate(-45deg);
}

.card-expect::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 138px;
    height: 2px;
    z-index: 2;
    background: #ede3e9;
    transform: rotate(-45deg);
}

/* .card-expect:hover .expect-icon svg, */
.card-expect.active .expect-icon svg {
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(1.2);
    fill: var(--white-one);
}

.row-gap-48 {
    row-gap: 48px;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.title-expect-card {
    width: 72.56%;
}

.title-expect-card h2 {
    font: 500 30.24px/37.56px var(--font-maven-pro);
    color: var(--gray-800);
}

.desc-expect-content {
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
}

.row-gap-24 {
    row-gap: 24px;
}

/* SCROLL SECTION EXPECT CAROUSEL CSS START */
.section-the-expect {
    overflow: hidden;
    position: relative;
    padding: 80px 0;
}

.row-cards-expect {
    margin-top: 40px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 24px !important;
    padding-bottom: 24px !important;
    padding-top: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.row-cards-expect::-webkit-scrollbar {
    display: none;
}

.col-expect-item {
    scroll-snap-align: start !important;
    box-sizing: border-box;
}

/* Arrow Navigation Trigger Buttons */
.expect-carousel-nav {
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    z-index: 4;
    justify-content: space-between;
    top: 56%;
    left: 0;
    padding-left: 0;
    padding-right: 0;
}

.expect-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #ede3e9;
    background: #ffffff;
    color: var(--gray-800, #222222);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    outline: none;
    user-select: none;
}

.expect-nav-btn:first-child {
    margin-left: -30px;
}

.expect-nav-btn:last-child {
    margin-right: -10px;
}

.expect-nav-btn:hover:not(:disabled) {
    background: #e30613;
    border-color: #e30613;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227, 6, 19, 0.3);
}

.expect-nav-btn:active:not(:disabled) {
    transform: translateY(0);
}

.expect-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
    background: #f5f5f5;
    border-color: #e0e0e0;
}

/* Card Number Badge */
.expect-badge {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--font-maven-pro);
    font-size: 13px;
    font-weight: 700;
    color: #e30613;
    background: rgba(227, 6, 19, 0.08);
    border: 1px solid rgba(227, 6, 19, 0.2);
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* .card-expect:hover .expect-badge, */
.card-expect.active .expect-badge {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 992px) {
    .section-the-expect .col-expect-item {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-the-expect .card-expect {
        width: 100%;
        height: 100%;
        min-height: 380px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .section-the-expect .col-expect-item {
        flex: 0 0 calc(65% - 12px) !important;
        width: calc(65% - 12px) !important;
        max-width: calc(65% - 12px) !important;
        min-width: calc(65% - 12px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-the-expect .card-expect {
        width: 100%;
        height: 100%;
        min-height: 360px;
    }
}

@media (max-width: 767px) {
    .section-the-expect {
        padding: 50px 0 !important;
    }

    .section-the-expect .row-cards-expect {
        margin-top: 24px !important;
        padding-bottom: 16px !important;
        gap: 16px !important;
    }

    .section-the-expect .col-expect-item {
        flex: 0 0 calc(90% - 8px) !important;
        width: calc(90% - 8px) !important;
        max-width: calc(90% - 8px) !important;
        min-width: calc(90% - 8px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-the-expect .card-expect {
        width: 100% !important;
        height: 100% !important;
        min-height: 320px !important;
        padding: 32px 24px !important;
    }
}

/* SCROLL SECTION EXPECT CAROUSEL CSS END */

/* SECTION THE EXPECT END */

/* HEADER MODULAR PAGE START */
.header-modular-page {
    background: var(--white-one);
    width: 100%;
    height: 56.24vh;
    overflow: hidden;
    position: relative;
}

.header-modular-page::before {
    content: " ";
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: rgba(18, 23, 28, 0.15);
    position: absolute;
    z-index: 2;
}

.caption-header-modular {
    width: 100%;
    background: transparent none;
    height: 100%;
    display: flex;
    align-items: flex-end;
    -ms-align-items: flex-end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 4;
}

.heaer-content-agenda {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.left-header-agenda {
    width: 100%;
    height: 52vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: 1px solid #fff; */
    padding: 132px 0px 36px 0px;
}

.content-caption-center {
    display: flex;
    flex-direction: column;
    width: 76%;
    width: 63%;
    height: auto;
    padding: 24px 15px 24px 15px;
    font: 500 18px/26px var(--font-maven-pro);
    color: var(--gray-100);
    text-align: center;
    position: relative;
}

.subtitle-header-agenda {
    width: fit-content;
    display: flex;
    align-items: flex-start;
}

.subtitle-header-agenda h2 {
    max-width: 86%;
    font: 500 42px/49px var(--font-maven-pro);
    color: var(--white-one);
    letter-spacing: -0.6px;
    text-align: left;
}

.title-header-agenda {
    width: fit-content;
    display: flex;
    align-items: flex-start;
}

.title-header-agenda h1 {
    text-align: left;
    font: 500 31.24px/37.56px var(--font-maven-pro);
    color: var(--white-one);
    text-align: left;
    letter-spacing: -0.45px;
}

.cover-heeader-section {
    width: 100vw;
    height: 100vh;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.cover-heeader-section img {
    min-width: 100%;
    max-width: 100%;
    top: -36px;
    position: absolute;
    min-width: 112%;
    max-width: 112%;
    top: -36px;
    position: relative;
    left: -4.24%;
}

.content-caption-center {
    position: relative;
    z-index: 5;
    width: 100%;
}

.right-header-agenda {
    width: 100%;
    height: 52vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* border: 1px solid #fff; */
    padding: 86px 0px 36px 0px;
}

.date-timeline-agenda {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font: 400 32.64px/36.64px var(--font-cascadia-code);
    color: var(--white-one);
    letter-spacing: -0.40px;
}

.month-of-agenda {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font: 400 24.64px/27.64px var(--font-cascadia-code);
    color: var(--white-one);
    letter-spacing: -0.40px;
}

.location-of-agenda {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font: 400 24.64px/27.64px var(--font-cascadia-code);
    color: var(--white-one);
    letter-spacing: -0.40px;
}

.ornament-header-agenda {
    width: 822px;
    height: 752px;
    background-image: url('../images/ornaments/ornament-header-agenda.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}

.filter-tab-day {
    width: 100%;
    display: flex;
    gap: 10px;
}

.filter-tab-day ul {
    width: 100%;
    list-style: none;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    border-radius: 12px;
    background: var(--gray-100);
}

.filter-tab-day ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font: 400 18.64px/26.64px var(--font-maven-pro);
    color: var(--gray-500);
    text-align: left;
    letter-spacing: -0.40px;
    padding: 6px 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-check-day {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.day-value {
    font: 400 18.64px/26.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.icon-check-day svg {
    fill: var(--gray-600);
    transition: 0.3s ease;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
    display: none;
}

.filter-tab-day ul li a.active .icon-check-day {
    display: flex;
}

.filter-tab-day ul li a.active .icon-check-day svg {
    fill: var(--scarlet-red-600);
    display: block;
}

.filter-tab-day ul li a.active {
    color: var(--scarlet-red-600);
    position: relative;
}

.filter-tab-day ul li a.active::before {
    content: "";
    width: 64px;
    height: 3.5px;
    background: var(--scarlet-red-600);
    border-radius: 4px;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.filter-tab-day ul li a.active .day-value {
    font: 500 18.64px/26.64px var(--font-maven-pro);
    color: var(--scarlet-red-600);
}

.agenda-card-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.agenda-card-item.hidden-card {
    display: none !important;
}

.subdesc-agenda {
    width: 58.56%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
}

.agenda-left-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 24px; */
    gap: 10px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
    padding-right: 48px;
}

.agenda-speakers-list {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
}

.label-list-speakers {
    font: 400 17px/20.64px var(--font-maven-pro);
    color: var(--gray-600);
}

.people-speaker-name {
    width: 90%;
    font: 400 18px/21.64px var(--font-maven-pro);
    color: var(--gray-600);
}

.title-agenda-left {
    height: auto;
}

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

.avatar-speaker-agenda {
    width: 60px;
    height: 60px;
    border-radius: 32px;
    overflow: hidden;
    background: var(--gray-400);
    background: url(../images/ornaments/bg-speaker-logo.jpg) no-repeat center center;
    /* background-size: 100%; */
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray-200);
    letter-spacing: -0.98px;
    font: 500 18.56px/20px var(--font-maven-pro);
}

.avatar-speaker-agenda span {
    visibility: hidden;
}

/* One avatar per speaker on multi-speaker sessions — overlapped "avatar
   stack" so 3-4 circles read as one group instead of stacking vertically.
   See plans/2026-08-20-1822-agenda-multi-speaker-avatars-plan.md. */
.avatar-group-speaker-agenda {
    display: flex;
}

.avatar-group-speaker-agenda .avatar-speaker-agenda {
    border: 2px solid var(--white-one, #fff);
}

.avatar-group-speaker-agenda .avatar-speaker-agenda:not(:first-child) {
    margin-left: -14px;
}

.avatar-group-speaker-agenda .avatar-speaker-agenda:hover {
    position: relative;
    z-index: 1;
}

.speaker-agenda-left {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 2px;
    width: 49%;
}

.speaker-agenda-left:only-child {
    width: 100%;
}

.wraper-speaker-agenda {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    row-gap: 8px;
}

.avatar-speaker-agenda img {
    max-width: 108%;
    height: 108%;
    object-fit: contain;
}

.name-speaker-agenda {
    width: auto;
    /* max-width: 76%; */
    max-width: 70.14%;
    font: 500 20px/22px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.40px;
}

.name-speaker-agenda span {
    font: 500 14.64px/18.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.labeling-speakers {
    width: 100%;
    font: 600 16.64px/18.64px var(--font-maven-pro);
    color: var(--gray-800);
}

.name-speaker-agenda em {
    font: 400 16px/17.64px var(--font-maven-pro);
    color: var(--gray-500);
    font-style: normal;
}

.agenda-right-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
    padding-left: 48px;
    min-height: 292px;
    justify-content: space-between;
}

.wrp-day-room {
    display: flex;
    align-items: center;
}

.right-day-room {
    padding: 26px 15px 24px 15px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

.desc-day-val {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.desc-day-val .card-day-icon {
    display: flex;
}

.desc-day-val .event-d-m-y {
    display: flex;
}

.desc-day-val .card-day-icon {
    width: 68px;
    height: 60px;
}

.wrp-time-room {
    width: 46%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
}

.time-day-new {
    width: 100%;
    display: flex;
    gap: 15px;
}

.card-day-icon {
    width: 84px;
    height: 73px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.value-day-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font: 500 24px/22px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.40px;
    padding-bottom: 13px;
}

.day-label-card {
    display: flex;
    justify-content: center;
    align-items: center;
    font: 500 17px/20.64px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.40px;
    background: var(--gray-200);
    width: 100%;
    padding: 2px 10px 4.5px 10px;
    text-transform: uppercase;
}

.day-and-date {
    width: 54%;
    display: flex;
    gap: 24px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
    min-height: 124px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px;
}

.spesification-date-event {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.place-time-duration {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
}

.event-d-m-y {
    font: 500 24px/22px var(--font-maven-pro);
    color: var(--gray-800);
}

.title-session-day {
    margin-top: 15px;
    margin-bottom: 8px;
    font: 500 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
    width: 82%;
    letter-spacing: -0.56px;
}

.flex-session-transition {
    display: flex;
    align-items: center;
    row-gap: 0px;
    column-gap: 20px;
}

.flex-session-transition {
    padding: 15px 15px 15px 15px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

.right-break-session {
    padding: 24px 15px 15px 15px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    display: flex;
    align-items: center;
    gap: 18px;
    font: 500 24px/22px var(--font-maven-pro);
    color: var(--gray-800);
}

.icon-break-session {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--gray-800);
    border-radius: 20px;
    padding: 8px 8px;
}

.icon-break-session svg {
    max-width: 28px;
    height: auto;
    fill: var(--gray-900);
    object-fit: contain;
}

.icon-break-session svg .cls-2 {
    fill: none;
}

.mobile-day-val {
    display: none;
}

.tracked {
    display: flex;
    align-items: center;
    gap: 10px;
}

.place-room-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0px;
}

.icon-24 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 3px;
}

.section-agenda-filter .wrp-card-agenda-new {
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    padding: 2px 18px 5px 18px;
    border: 1px solid var(--gray-200);
}

/* Warna untuk urutan ganjil (1, 3, 5, dst) */
.section-agenda-filter .wrp-card-agenda-new.is-odd {
    background: #fff;

}

/* Warna untuk urutan genap (2, 4, 6, dst) */
.section-agenda-filter .wrp-card-agenda-new.is-even {
    background: #f5fafe;
}

.break-trasition {
    width: 100%;
    background: #fef2f2;
    overflow: hidden;
    padding: 10px 18px 15px 18px;
    border-radius: 8px;
}

.wrp-card-agenda-new .rowing {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
}

.wrp-card-agenda-new .rowing:nth-of-type(odd) .agenda-left-content {
    padding: 15px 15px 20px 15px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

.vanue-room {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.left-notice .icon-24 svg {
    fill: none;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    stroke: #000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 66.67px;
}

.vanue-room span {
    font: 400 16px/17.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.vanue-room p {
    color: var(--gray-800);
    font: 400 17px/18px var(--font-maven-pro);
}

.content-category-agenda span {
    font: 400 17px/22.64px var(--font-maven-pro) !important;
    font-weight: 400 !important;
    padding: 6px 12px;
    border-radius: 18px;
}

.icon-48 svg {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.day-agenda-value {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: 500 31.24px/34.56px var(--font-maven-pro);
    color: var(--gray-900);
}

.day-agenda-value p {
    font: 500 31.24px/34.56px var(--font-maven-pro);
    color: var(--gray-900);
}

.date-agenda-value {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.month {
    width: 100%;
    display: flex;
    justify-content: center;
    font: 400 18.64px/26.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.date {
    width: 100%;
    display: flex;
    justify-content: center;
    font: 500 31.24px/34.56px var(--font-maven-pro);
    color: var(--gray-900);
}

.yars {
    width: 100%;
    display: flex;
    justify-content: center;
    font: 400 18.64px/26.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.more-agenda {
    width: 100%;
    display: flex;
    justify-content: center;
}

.more-agenda a {
    text-decoration: none;
    outline: none;
    display: block;
    width: 100%;
    gap: 10px;
    font: 500 18px/26px var(--font-maven-pro);
    letter-spacing: -0.40px;
    color: var(--gray-600);
    border: 1px solid var(--gray-400);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 18px;
}

.left-notice {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.day-shwoing-title {
    height: auto;
}

.wrp-summary-schedule {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 48px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
}

.title-summary-schedule {
    font: 400 31.24px/37.56px var(--font-maven-pro);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.45px;
}

.day-shwoing-title h2 {
    font: 500 42px/49px var(--font-maven-pro);
    color: var(--gray-950);
    letter-spacing: -0.6px;
}

.value-agenda-daily {
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
}

.card-toas-notice {
    background: #fef2f2;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    font: 400 18.24px/26px var(--font-maven-pro);
    color: var(--gray-600);
    border-radius: 8px;
}


.right-notice {
    font: 400 18.24px/26px var(--font-maven-pro);
    color: var(--gray-600);
    letter-spacing: -0.32px;
}

.more-agenda {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.card-event-parallel {
    background: var(--white-one);
    min-width: 298px;
    width: 298px;
    height: auto;
    min-height: 486px !important;
    max-height: 496px !important;
    border-radius: 6px;
    overflow: hidden;
    padding: 6px 16px 18px 16px;
    border: 1px solid var(--gray-200);
}

.row-card-parallel {
    position: relative;
}

.wrp-event-parallel {
    display: flex;
    align-items: start;
    flex-direction: row;
    gap: 14px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.wrp-event-parallel::-webkit-scrollbar {
    display: none;
}

.wrp-event-parallel>.card-event-parallel {
    flex: 0 0 298px;
    scroll-snap-align: start;
    min-height: 352px;
}

.wrp-card-paralel {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDhkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg2JSIgc3RvcC1jb2xvcj0iI2ZmZmNmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg2JSIgc3RvcC1jb2xvcj0iI2ZmZmNmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(to bottom, #ffd8db 0%, #fffcfc 86%, #fffcfc 86%);
    width: 100%;
    height: auto;
    min-height: 15px;
    border-radius: 4px;
    overflow: hidden;
    padding: 15px 24px 20px 24px;
    margin-top: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--gray-200);
}

.title-card-paralel {
    width: 100%;
    height: auto;
}

.title-card-paralel h2 {
    font: 500 24px/22px var(--font-maven-pro);
    color: var(--gray-800);
}

.row-desc-info-room {
    width: 100%;
    display: flex;
    gap: 24px;
    padding: 12px 0px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.desc-info-room {
    font: 400 17px/20.64px var(--font-maven-pro);
    color: var(--gray-600);
}

.row-desc-info-room {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrp-arrow-snapped {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
}

.circle-arrow-next {
    width: 18px;
    height: 18px;
    margin-top: 1.4px;
    transform: rotate(270deg);
    padding: 2.5px;
}

.circle-arrow-prev {
    width: 18px;
    height: 18px;
    margin-top: 1.4px;
    transform: rotate(-270deg);
    padding: 2.5px;
}

.row-desc-info-room .col-md-8 {
    flex: 0 0 auto;
    width: 48%;
}

.circle-arrow {
    background: var(--white-one);
    border-radius: 18px;
    border: 1px solid var(--gray-300);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.wrp-time-parallel {
    width: 100%;
    display: flex;
    gap: 12px;
    justify-content: start;
    align-items: center;
}

.icon-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    padding: 3px;
}

.icon-16 svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vanue-room-small span {
    font: 400 12px/14.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.vanue-room-small {
    font: 400 13.5px/14.64px var(--font-maven-pro);
    color: var(--gray-700);
}

.title-parallel-event {
    width: 100%;
    height: auto;
    margin-top: 8px;
    min-height: 94px;
}

.title-parallel-event a {
    text-decoration: none;
}

.title-parallel-event a h2 {
    font: 500 21px/23.64px var(--font-maven-pro);
    color: var(--gray-600);
    letter-spacing: -0.56px;
}

.wrp-circle-avatar-small {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 16px;
}

.wrp-circle-avatar-small .avatar-people {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.avatar-label-small {
    width: 100%;
    font: 500 13.5px/14.64px var(--font-maven-pro);
    color: var(--gray-700);
}

.wrp-circle-avatar-small .plus-speaker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.spaker-names-items {
    margin-top: 10px;
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font: 400 14px/15.64px var(--font-maven-pro);
    color: var(--gray-700);
    letter-spacing: -0.36px;
    min-height: 57px;
    max-height: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-agenda-small {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.more-agenda-small a {
    text-decoration: none;
    outline: none;
    display: block;
    width: 100%;
    gap: 10px;
    font: 500 14px/16px var(--font-maven-pro);
    letter-spacing: -0.40px;
    color: var(--gray-600);
    border: 1px solid var(--gray-400);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 8px;
}

/* HEADER MODULAR PAGE END */

/* PAGE ABOUT US START */
.section-overview-about {
    width: 100%;
    position: relative;
    height: auto;
    overflow: hidden;
}

.header-page-about {
    width: 100%;
    height: 89.86vh;
    overflow: hidden;
    position: relative;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 50% 100%, hsla(356, 75%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 51% 39%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 98%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
}

.header-page-about .ornament-header-agenda {
    width: 914px;
    height: 862px;
    background-image: url('../images/ornaments/ornament-header-agenda.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: unset;
    bottom: 0;
}

.header-page-about .ornament-header-about {
    width: 914px;
    height: 862px;
    background-image: url('../images/ornaments/ornament-header-about.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: unset;
    bottom: 0;
}

.header-page-about .cover-heeader-section img {
    min-width: 100%;
    max-width: 100%;
    top: -36px;
    position: absolute;
    min-width: 112%;
    max-width: 112%;
    top: -36px;
    position: relative;
    left: -4.24%;
    height: 111%;
    object-fit: cover;
}

.left-about-page h2 {
    font: 500 42px/49px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.6px;
    text-align: left;

}

.page-about-overview {
    font: 400 20.64px/27.64px var(--font-maven-pro);
    letter-spacing: -0.48px;
    text-align: left;
    width: 100%;
}

.left-about-page {
    font: 500 30.24px/37.56px var(--font-maven-pro);
}

.right-ornament-about {
    width: 100%;
    height: auto;
    overflow: unset;
    /* border: 1px solid #cf0; */
    min-height: 124px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: unset;
}

.right-desc-about {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--gray-600);
    padding-bottom: 56px;
}

.left-about-keynumber {
    font: 500 30.24px/37.56px var(--font-maven-pro);
}

.icon-about-number {
    display: flex;
    align-items: flex-end;
}

.icon-key {
    width: 64px;
    height: auto;
}

.icon-about-number {
    margin-top: 224px;
    margin-bottom: 8px;
}

.section-about-keynumber .subtitle-desc-number {
    width: 66%;
}

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

.left-about-keynumber h2 {
    font: 500 42px/49px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.6px;
    text-align: left;
}

.logo-sponsor-backed {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 24px;
}

.section-why-matters {
    background: #f5fafe;
}

.left-card-matters {
    width: 100%;
    height: auto;
    min-height: 310px;
}

.vertical-card-matters {
    width: 98%;
    height: auto;
    min-height: 645px;
    /* border: 1px solid #cf0; */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 50% 100%, hsla(356, 75%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 51% 39%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 98%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.title-desc-matters {
    width: 100%;
    height: auto;
    color: var(--white-one);
    padding: 56px 36px 20px 36px;
    display: flex;
    flex-direction: column;
    row-gap: 18px;
}

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

.title-matters h2 {
    font: 500 32.24px/37.56px var(--font-maven-pro);
    color: var(--white-one);
}

.desc-matters {
    font: 400 21px/28px var(--font-maven-pro);
    letter-spacing: -0.64px;
    color: var(--white-one);
}

.logo-brand-tiif {
    width: 124px;
    height: auto;
}

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

.logo-brand-danantara {
    width: 156px;
    height: auto;
}

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

.thumbnail-matters {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-matters img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.desc-summary-about {
    font: 400 21.64px/29px var(--font-maven-pro);
    color: var(--gray-600);
    padding-right: 48px;
}

.horizontal-card-matters {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 10px;
    overflow: hidden;
    min-height: 48px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 50% 100%, hsla(356, 75%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 51% 39%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 98%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
}

.left-horizontal-matters {
    max-width: 36%;
    min-width: 36%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.thumb-horizontal-matters {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    height: 100%;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 61% 34%, hsla(356, 75%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 47% 21%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 45% 49%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%),
        radial-gradient(at 65% 59%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
}

.thumb-horizontal-matters img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.card-cta-funnel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    min-height: 220px;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 61% 34%, hsla(356, 75%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 47% 21%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 45% 49%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%),
        radial-gradient(at 65% 59%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
    padding: 48px 46px;
}

.card-cta-funnel .cta-hero-content {
    margin-top: 64px;
}

.triangle-ornament-card-left {
    width: 0;
    height: 0;
    border-top-width: 96px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 82px;
    border-right-style: solid;
    border-right-color: #fff;
    position: absolute;
    top: -8%;
    right: 88%;
    z-index: 4;
    rotate: 180deg;
    transform: scaleX(1);
    -ms-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.triangle-ornament-card-bottom-right {
    width: 0;
    height: 0;
    border-top-width: 99px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 80px;
    border-right-style: solid;
    border-right-color: #fff;
    position: absolute;
    bottom: -4%;
    right: -3%;
    z-index: 4;
    rotate: 360deg;
    transform: scaleY(1);
    -ms-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
}

.card-upcoming {
    width: 100%;
    min-height: 224px;
    background: var(--white-one);
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 2px solid var(--gray-100);
    padding: 40px 36px;
}

.card-upcoming::before {
    width: 100%;
    height: auto;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    min-height: 108px;
    background: var(--white-one) url(../images/ornaments/section-countdown-bg.jpg);
    background-size: 264%;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.card-upcoming::after {
    width: 100%;
    height: auto;
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    min-height: 108px;
    background: var(--white-one) url(../images/ornaments/section-countdown-bg.jpg);
    background-size: 264%;
    background-position: bottom center;
    background-repeat: no-repeat;
    transform: scaleY(-1);
}

.card-fairmont {
    width: 100%;
    height: 100%;
    min-height: 224px;
    background: var(--white-one);
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 2px solid var(--gray-100);
    display: flex;
    flex-direction: column;
}

.thumbnail-venue-fairmont {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumbnail-venue-fairmont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-title-upcoming {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 40px 36px 46px 30px;
    gap: 10px;
}

.text-title-upcoming {
    font: 400 20px/24.56px var(--font-maven-pro);
    color: var(--gray-600);
    letter-spacing: -0.76px;
    z-index: 3;
    position: relative;
}

.icon-date-events {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-date-events svg {
    max-width: 100%;
    height: 1005;
    object-fit: contain;
}

.icon-date-events svg rect {
    stroke: var(--gray-800);
}

.icon-date-events svg path {
    stroke: var(--gray-800);
}

.righ-horizontal-matters {
    width: auto;
}

.uppercase-label {
    font: 400 20px/24.56px var(--font-maven-pro);
    color: var(--gray-600);
    letter-spacing: -0.76px;
    z-index: 3;
    position: relative;
    text-transform: uppercase;
}

.row-countdown-small {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    position: relative;
}

.col-countdown-small {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 15px;
}

.title-upcoming {
    height: auto;
    z-index: 3;
    position: relative;
}

.label-countdown-small {
    font: 400 20px/24.56px var(--font-maven-pro);
    color: var(--gray-600);
    letter-spacing: -0.76px;
    z-index: 3;
    position: relative;
    text-transform: uppercase;
}

.separates-small {
    font: 400 20px/24.56px var(--font-maven-pro);
    color: var(--gray-600);
    letter-spacing: -0.76px;
    z-index: 3;
    position: relative;
    text-transform: uppercase;
}

.col-countdown-small {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.act-at-upcoming {
    width: 100%;
    margin-top: 24px;
}

.act-at-upcoming .cta-red-button a {
    padding: 19px 48px;
}

.title-upcoming h2 {
    font: 500 31px/36px var(--font-maven-pro);
    margin-bottom: 0px;
    letter-spacing: -0.58px;
    color: var(--gray-800);
}

.val-countdown-small {
    font: 500 32px/36px var(--font-maven-pro);
    margin-bottom: 0px;
    letter-spacing: -0.58px;
    color: var(--gray-800);
}

.col-gap-24 {
    width: 100%;
    height: 30px;
    z-index: 3;
    position: relative;
}

.righ-horizontal-matters .title-desc-matters {
    width: 100%;
    height: auto;
    color: var(--white-one);
    padding: 20px 36px 20px 36px;

}

.arrow-ornaments-one {
    width: 286px;
    height: 264px;
    background: url(../images/ornaments/arrow-ornament-001.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: 0px;
    top: 0px;
}

.arrow-ornaments-two {
    width: 286px;
    height: 264px;
    background: url(../images/ornaments/arrow-ornament-002.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: 264px;
    top: 0px;
}

.left-presidential-welcome {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    min-height: 576px;
    /* border: 1px solid #cf0; */
    position: relative;
}

.image-presidential {
    width: 558px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: -18%;
    z-index: 8;
}

.image-presidential img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.ornament-webbing-01 {
    width: 64px;
    height: 64px;
    background: url(../images/ornaments/webbing-ornament-001.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: -10%;
    bottom: 10%;
}

.ornament-webbing-02 {
    width: 64px;
    height: 64px;
    background: url(../images/ornaments/webbing-ornament-002.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: unset;
    top: 10%;
    right: 14%;
    bottom: unset;
}

.ornament-webbing-03 {
    width: 64px;
    height: 64px;
    background: url(../images/ornaments/webbing-ornament-003.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: -10%;
    bottom: 64%;
}


.ornament-webbing-outline-01 {
    width: 76px;
    height: 76px;
    background: url(../images/ornaments/webbing-ornament-001.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: unset;
    top: unset;
    left: 0;
    bottom: 0;
}

.ornament-webbing-outline-03 {
    width: 76px;
    height: 76px;
    background: url(../images/ornaments/webbing-ornament-003.png) top center no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: unset;
    right: 0;
    bottom: 0;
}

.section-about-program {
    overflow: hidden;
    position: relative;
    background-color: hsla(356, 86%, 48%, 1);
    background-image: radial-gradient(at 50% 100%, hsla(356, 75%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 34%, hsla(356, 100%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 51% 39%, hsla(356, 86%, 48%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(356, 88%, 41%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 98%, hsla(359, 79%, 20%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(356, 86%, 48%, 1) 0px, transparent 50%);
    min-height: 101vh;
    display: flex;
    align-items: center;
}

.left-about-program {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.title-about-program {
    width: 100%;
}

.title-about-program h2 {
    font: 500 42px/49px var(--font-maven-pro);
    color: var(--white-one);
    letter-spacing: -0.6px;
    text-align: left;
}

.subtitle-about-program {
    font: 500 22.24px/29px var(--font-maven-pro);
    color: var(--white-one);
    letter-spacing: -0.6px;
    text-align: left;
    padding-right: 186px;
}

.content-text-program {
    font: 400 21px/28px var(--font-maven-pro);
    color: var(--white-one);
    letter-spacing: -0.64px;
    padding-top: 18px;
}

.thumbnail-about-program {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.image-about-program {
    width: 100%;
    min-height: 240px;
    border-radius: 8px;
    overflow: hidden;
    padding-left: 18px;
}

.image-about-program img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.number-program {
    width: auto;
    height: auto;
    padding: 8px 8px;
    text-align: center;
    font: 400 42px/49px var(--font-maven-pro);
    color: var(--white-one);
    letter-spacing: -0.6px;
}

.items-program {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: start;
    border-bottom: 1px solid var(--white-trans-5);
    padding: 10px 0px 18px 0px;
    position: relative;
    overflow: unset;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.items-program:hover {
    opacity: 0.85;
}

.items-program.active {
    opacity: 1;
    transform: translateX(12px);
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

.items-program.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    right: unset;
    width: 18px;
    height: 2px;
    background: var(--white-one);
    transition: all 0.3s ease;
}

.title-items-program {
    display: flex;
    align-items: center;
}

.header-item-program {
    display: flex;
    align-items: center;
    gap: 20px;
}

.image-about-program {
    width: 100%;
    min-height: 240px;
    border-radius: 8px;
    overflow: hidden;
    padding-left: 18px;
}

.image-about-program img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.content-text-program p {
    min-height: 110px;
    transition: opacity 0.3s ease;
}

.title-right-program {
    text-align: left;
    padding-right: 24px;
    font: 400 42px/49px var(--font-maven-pro);
    color: var(--white-one);
    letter-spacing: -0.6px;
}

.right-about-program {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    padding-left: 32px;
}

/* MOBILE ABOUT PROGRAM START */
@media (max-width: 767px) {
    .section-about-program {
        min-height: auto !important;
        padding: 50px 0;
        align-items: flex-start;
    }

    .left-about-program .subtitle-about-program,
    .left-about-program .desc-about-program {
        display: none !important;
    }

    .right-about-program {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        row-gap: 30px;
        margin-top: 25px;
    }

    .items-program {
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        border-bottom: 1px solid var(--white-trans-5);
        padding-bottom: 25px;
        transform: none !important;
        cursor: default !important;
    }

    .items-program::before {
        display: none !important;
    }

    .caption-vids {
        top: -9.96%;
    }

    .header-item-program {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 6px;
    }

    .mobile-program-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 5px;
    }

    .mobile-subtitle p {
        font: 500 20px/24px var(--font-maven-pro);
        color: var(--white-one);
        opacity: 0.9;
        margin-bottom: 18px;
    }

    .mobile-desc p {
        font: 400 17.24px/23px var(--font-maven-pro);
        color: var(--white-one);
        opacity: 0.8;
        margin-bottom: 20px;
    }

    .left-about-page h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .arrow-ornaments-one {
        width: 90px;
        height: 91px;
    }

    .arrow-ornaments-two {
        width: 90px;
        height: 91px;
        right: 80px;
    }

    .image-presidential {
        width: 328px;
        position: relative;
    }

    .left-presidential-welcome {
        justify-content: center;
        min-height: 314px;
        margin-bottom: 52px;
    }

    .right-ornament-about {
        min-height: 48px;
    }

    .desc-summary-about {
        padding-right: 0;
    }

    .ornament-webbing-02 {
        width: 36px;
        height: 36px;
        right: -11px;
        top: -10%;
    }

    .ornament-webbing-01 {
        width: 52px;
        height: 52px;
        left: -5px;
        z-index: 8;
    }

    .ornament-webbing-03 {
        width: 46px;
        height: 46px;
        left: -10px;
    }

    .mobile-thumbnail {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 32px;
        margin-bottom: 18px;
    }

    .title-right-program {
        padding-right: 0px;
    }

    .mobile-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .ornament-webbing-outline-01 {
        width: 46px;
        height: 46px;
    }

    .ornament-webbing-outline-03 {
        width: 46px;
        height: 46px;
    }

    .title-right-program h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
        padding-right: 0;
    }

    .card-cta-funnel {
        padding-left: 30px;
        padding-right: 30px;
    }

    .title-desc-matters {
        width: 100%;
        height: auto;
        color: var(--white-one);
        padding: 56px 30px 20px 30px;
    }

    .number-program p {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .left-about-keynumber {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .left-about-keynumber h2 {
        margin-bottom: 30px;
        margin-top: 6px;
    }

    .mobile-desc {
        font: 400 17.24px/23px var(--font-maven-pro);
    }

    .left-about-keynumber h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .horizontal-card-matters {
        flex-direction: column;
    }

    .thumb-horizontal-matters img {
        max-width: 110%;
        height: 110%;
        object-fit: fill;
        width: 110%;
        top: -48px;
    }

    .righ-horizontal-matters .title-desc-matters {
        width: 100%;
        height: auto;
        color: var(--white-one);
        padding: 36px 30px 36px 30px;
    }

    .section-be-apart .speakers-title-left {
        font: 500 24px/31px var(--font-maven-pro);
        text-align: left;
        justify-content: start;
    }

    .title-number-home h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .left-horizontal-matters {
        min-width: 100%;
        max-width: 100%;
    }

    .icon-about-number {
        margin-top: 52px;
        margin-bottom: 8px;
    }

    .section-about-keynumber .subtitle-desc-number {
        width: 100%;
        padding-right: 8px;
    }

    .vertical-card-matters {
        min-height: 320px;
    }

    .vertical-card-matters {
        width: 100%;
        margin-bottom: 24px;
    }

    #about .card-why-attend {
        min-height: 237px;
    }

    .section-about-home {
        background-size: 256%;
    }

    .section-new-countdown {
        background-size: 256%;
    }

    .section-number-home {
        background-size: 256%;
    }

    .section-number-home::before {
        background-size: 256%;
    }

    .section-the-expect {
        background-size: 256%;
    }

    .section-the-expect::before {
        background-size: 256%;
    }

}

/* MOBILE ABOUT PROGRAM END */

/* PAGE ABOUT US END */
/* HOTELS PAGE START  */

.wrp-thumbnail-hotels {
    width: 100%;
    height: auto;
}

.wrp-thumbnail-hotels a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    cursor: unset;
}

.card-thumbnail-hotels {
    background: var(--gray-200);
    width: 100%;
    height: 404px;
    position: relative;
}

.card-thumbnail-hotels img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrp-hotel-desc {
    width: 100%;
    font: normal 400 18.64px/22.64px var(--font-maven-pro);
    color: var(--gray-800);
    flex-direction: column;
}

.wrp-title-hotels {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wrp-title-hotels h2 {
    font: 500 31.24px/35.56px var(--font-maven-pro);
    color: var(--gray-950);
    letter-spacing: -0.98px;
    margin-bottom: 8px;
}

.star-hotel-class {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
}

.star-hotels {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-star-review {
    width: 20px;
    min-height: 20px;
}

.right-column-hotels {
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-height: 497px;
}

.icon-star-review svg {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    fill: #ffae00;
}

.rating-review {
    font: normal 400 18.64px/22.64px var(--font-maven-pro);
    color: var(--gray-800);
}

.classified-hotels {
    font: normal 400 18.24px/22.64px var(--font-maven-pro);
    color: var(--gray-500);
    letter-spacing: -0.32px;
}

.hotel-address {
    font: normal 400 18.24px/22.64px var(--font-maven-pro);
    color: var(--gray-500);
    letter-spacing: -0.32px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.distance-and-vanue {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    padding-top: 3px;
    padding-bottom: 14px;
}

.icon-distance {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.distace-label {
    font: normal 400 16.64px/20.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.distance-value {
    font: 500 23.24px/27.64px var(--font-maven-pro);
    color: var(--gray-800);
}

.summary-hotel-desc {
    font: normal 400 16.24px/20.64px var(--font-maven-pro);
    color: var(--gray-500);
    letter-spacing: -0.32px;
}

.wrp-pricetag-hotel {
    width: 100%;
    height: auto;
    min-height: 64px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
}

.left-price-hotels {
    width: 69%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    row-gap: 9px;
}

.row-line-price {
    display: flex;
    flex-direction: column;
    row-gap: 1px;
    font: normal 400 16.64px/20.64px var(--font-maven-pro);
    color: var(--gray-500);
}

.row-line-price h3 {
    font: 500 23.24px/27.64px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.52px;
}

.right-price-hotels {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    row-gap: 19px;
    gap: 19px;
    position: relative;
}

.price-per-night {
    font: normal 400 16.64px/20.64px var(--font-maven-pro);
    color: var(--gray-500);
    text-align: center;
    padding-top: 16px;
    position: relative;
}

.price-per-night::before {
    content: "";
    width: 1.5px;
    height: 100%;
    background: var(--gray-300);
    position: absolute;
    top: 0;
    left: -48%;
}

.price-per-night h3 {
    font: 500 23.24px/27.64px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.52px;
    text-align: center;
    margin-top: 4px;
}

.badges-floating-prices {
    font: normal 400 13.64px/15.64px var(--font-cascadia-code);
    color: var(--gray-100);
    text-align: center;
    width: fit-content;
    padding: 12px 8px 6px 8px;
    background: var(--scarlet-red-600);
    text-transform: uppercase;
    position: absolute;
    top: -52%;
    right: 0;
    left: 0;
    margin: 0 auto;
    border-radius: 6px 6px 6px 6px;
}

/* HOTELS PAGE END  */
/* PAGE SPEAKERS START */
.wrp-card-speaker-page {
    width: 100%;
    height: auto;
    background: var(--white-one);
    min-height: 296px;
    border: 1.5px solid var(--gray-300);
    box-shadow: 0px 3px 10.3px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-radius: 8px;
    will-change: transform, opacity;
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
    -moz-transition: box-shadow 0.5s ease, border-color 0.5s ease;
    -webkit-transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.wrp-card-speaker-page:hover {
    box-shadow: 0px 3px 10.3px 0px rgba(0, 0, 0, 0.24);
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
    -moz-transition: box-shadow 0.5s ease, border-color 0.5s ease;
    -webkit-transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.link-speaker-details {
    position: relative;
    text-decoration: none;
    outline: none;
    color: var(--gray-800);
    font: normal 400 18.32px/22.64px var(--font-maven-pro);
    letter-spacing: 0.32px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
}

.card-image-speaker {
    width: 100%;
    height: auto;
    /* aspect-ratio: 3 / 4; */
    aspect-ratio: 3 / 3;
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.card-image-speaker img,
.card-image-speaker .card-image-speaker-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card-image-speaker img {
    object-fit: cover;
}

.speaker-title-desc {
    padding: 20px 86px 28px 24px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: normal 400 18.64px/22.64px var(--font-maven-pro);
    color: var(--gray-500);
    letter-spacing: -0.52px;
    position: relative;
    min-height: 156px;
}

.wrp-badges-speeker {
    width: 100%;
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
}

.badges-speeker {
    width: fit-content;
    padding: 8px 16px 9px 16px;
    color: var(--white-one);
    text-align: center;
    font: normal 400 15.64px/19.64px var(--font-maven-pro);
    border-radius: 29px;
    letter-spacing: -0.48px;
}

.badges-text-panelist {
    background: #25c278;
    color: var(--white-one);
}

.badges-text-moderator {
    background: #2a8eff;
    color: var(--white-one);
}

.badges-text-keynote {
    background: var(--scarlet-red-600);
    color: var(--white-one);
}

.badges-text-speeker {
    background: #2f34a4;
    color: var(--white-one);
}

.day-speaker-schedule {
    position: absolute;
    font: normal 400 18.64px/22.64px var(--font-maven-pro);
    right: 10px;
    bottom: 8px;
    visibility: hidden;
}

.title-name-speaker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: normal 400 17px/21.64px var(--font-maven-pro);
    min-height: 86px;
    letter-spacing: -0.86px;
}

.title-name-speaker h2 {
    font: normal 500 28.24px/32.65px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.52px;
}

.arrow-details {
    width: 64px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    position: absolute;
    right: 28px;
    top: 42px;
}

.arrow-details img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
}


.link-speaker-details:hover .arrow-details img {
    transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    -webkit-transform: translateX(10px);
}

.link-speaker-details:hover .card-image-speaker img {
    transform: scale(1.1, 1.1);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
}

/* PAGE SPEAKERS END */
/* SECTION DETAIL SPEAKER START */


/* Custom Variables for Speaker Detail Modal & Slide Animation */
:root {
    --speaker-detail-panel-bg: #f5fafe;
    --speaker-detail-backdrop-blur: 9px;
    --speaker-detail-overlay-bg: var(--white-trans-5);
    --speaker-detail-transition-speed: 0.45s;
    --speaker-detail-ease-curve: cubic-bezier(0.25, 1, 0.5, 1);
    --speaker-detail-z-index: 99;
}

.section-detail-speakers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: var(--speaker-detail-z-index);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--speaker-detail-transition-speed) ease,
        visibility var(--speaker-detail-transition-speed) ease;
}

.section-detail-speakers::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--speaker-detail-overlay-bg);
    backdrop-filter: blur(var(--speaker-detail-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--speaker-detail-backdrop-blur));
    z-index: -1;
    opacity: 0;
    transition: opacity var(--speaker-detail-transition-speed) ease;
}

.section-detail-speakers>* {
    position: relative;
    z-index: 1;
}

.section-detail-speakers.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
}

.section-detail-speakers.active::before {
    opacity: 1;
}

.container-side {
    max-width: 54.86%;
    width: 100%;
    height: 100vh;
    background: var(--speaker-detail-panel-bg);
    margin: 0;
    position: relative;
    padding-top: 16px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    overflow-y: auto;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transition: transform var(--speaker-detail-transition-speed) var(--speaker-detail-ease-curve);
    -webkit-transition: -webkit-transform var(--speaker-detail-transition-speed) var(--speaker-detail-ease-curve);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
}

.section-detail-speakers.active .container-side {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

.main-content-speaker {
    width: 100%;
    padding: 8px 30px;
    background: var(--gray-50);
}

.right-name-speaker {
    padding: 18px 24px 8px 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 18px;
}

.name-title-speaker-side {
    width: 100%;
    font: normal 400 18.64px/22.64px var(--font-maven-pro);
    margin-bottom: 4px;
}

.name-title-speaker-side h2 {
    font: normal 500 48.64px/52.64px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.62px;
}

.subname-title-speaker-side {
    font: normal 400 20.24px/24.24px var(--font-maven-pro);
    color: var(--gray-800);
    letter-spacing: -0.42px;
}

.description-speaker-side {
    font: normal 400 18.64px/26.64px var(--font-maven-pro);
    color: var(--gray-500);
    letter-spacing: -0.32px;
}

.close-speaker {
    display: flex;
    align-items: center;
    justify-content: end;
    font: 400 20.64px/23.64px var(--font-cascadia-code);
    color: var(--gray-500);
}

.link--arrowed .arrow-icon {
    position: absolute;
    top: -1px;
    left: 0px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
    transform: rotate(180deg);
}

.head-side-content {
    width: 100%;
    padding: 8px 30px;
}

.arrow-back-navigation {
    padding: 0;
    z-index: 7;
    position: relative;
}

.link {
    color: var(--gray-700);
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}

.link--arrowed {
    display: inline-block;
    height: 2rem;
    line-height: 1.7rem;
    position: relative;
    padding-left: 46px;
    color: var(--gray-700);
}

.link--arrowed .arrow-icon {
    position: absolute;
    top: -1px;
    left: 0px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
    transform: rotate(180deg);
}

.link--arrowed .arrow-icon--circle {
    -webkit-transition: stroke-dashoffset .3s ease;
    transition: stroke-dashoffset .3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
}

.link--arrowed:hover .arrow-icon {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    transform: rotate(180deg);

}

.link--arrowed:hover .arrow-icon--circle {
    stroke-dashoffset: 0;

}

.link--arrowed {
    color: var(--gray-700);
    font: 400 20.64px/23.64px var(--font-cascadia-code);
    display: flex;
    align-items: center;
}

.link--arrowed:hover {
    color: var(--scarlet-red-600);
    text-decoration: underline;
}

.link--arrowed:focus {
    color: var(--scarlet-red-600);
    outline: none;
}

.main-content-speaker {
    background: #f5fafe;
    width: 100%;
    height: auto;
    min-height: 256px;
}

.left-thumbnail-speaker {
    width: 100%;
    height: auto;
}

.right-name-speaker {
    width: 100%;
    height: auto;
    padding-left: 0;
    z-index: 5;
    position: relative;
}

.left-thumbnail-speaker {
    height: auto;
}

.name-title-speaker-side h2 {
    font: 500 40px/47px var(--font-maven-pro);
    color: var(--gray-950);
    text-align: left;
    letter-spacing: -0.6px;
}

.subname-title-speaker-side {
    font: 400 20.64px/27.64px var(--font-maven-pro);
    color: var(--gray-600);
}

.wrp-desc-season {
    width: 100%;
    height: auto;
    min-height: 320px;
    padding: 30px 30px;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: var(--white-one);
}

/* SIDE SPESIAL PEOPLE START*/
.day-time-as {
    display: flex;
    align-items: center;
    gap: 24px;
}

.left-speaker-side {
    position: relative;
    width: 100%;
    min-height: 524px;
    overflow-x: unset;
    border-bottom-left-radius: 16px;
    display: flex;
    width: 100%;
    height: auto;
    padding: 5px 0px 48px;
    justify-content: flex-end;
    top: -24px;
}

.left-speaker-side .triangle-ornament-top-right {
    width: 0;
    height: 0;
    border-top-width: 96px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 75px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    top: 6.4%;
    right: -5%;
    z-index: 4;
    rotate: 180deg;
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

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

.left-speaker-side .triangle-ornament-bottom-left {
    width: 0;
    height: 0;
    border-top-width: 45px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 60px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    top: 28%;
    right: 85%;
    z-index: 4;
    rotate: 180deg;
    transform: scaleX(1);
    -ms-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.left-speaker-side .triangle-ornament-center-right {
    width: 0;
    height: 0;
    border-top-width: 58px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 73px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    top: 21%;
    right: -6.5%;
    z-index: 4;
    rotate: -90deg;
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.left-speaker-side .triangle-ornament-bottom-right {
    width: 0;
    height: 0;
    border-top-width: 88px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 60px;
    border-right-style: solid;
    border-right-color: #f5fafe;
    position: absolute;
    bottom: 7%;
    right: -4%;
    z-index: 4;
    rotate: 360deg;
    transform: scaleY(1);
    -ms-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
}

.title-speaker-section {
    width: 100%;
}

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

.day-on-stage {
    display: flex;
    align-items: center;
    gap: 24px;
}

.day-value-stage {
    font: 500 21px/28px var(--font-maven-pro);
    color: var(--gray-700);
}

.day-calendar-stage {
    font: 500 21px/28px var(--font-maven-pro);
    color: var(--gray-700);
}

.row-why-home.gutter--24.row,
.row-why-home.gutter--24.container,
.row-why-home.gutter--24.container-fluid {
    margin-left: -24px;
    margin-right: -24px;
}

.gutter--24>[class^="col-"] {
    padding-left: 24px;
    padding-right: 24px;
}

/* SECTION DETAIL SPEAKER 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-maven-pro);
    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-maven-pro);
    color: var(--gray-500);
    text-align: left;
    line-height: normal;
    margin-bottom: 0px;
    text-decoration: none;
}

.item-link-footer ul li a:hover {
    color: var(--scarlet-red-600);
    -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-maven-pro);
}

.footer-contact-value {
    font: normal 400 18.64px/22.64px var(--font-maven-pro);
    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-maven-pro); */
    font: normal 400 17.24px/22.64px var(--font-maven-pro);
    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; */
    justify-content: start;
    -ms-justify-content: start;
    -moz-justify-content: start;
    -webkit-justify-content: start;
}

.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-maven-pro); */
    font: normal 400 17.24px/22.64px var(--font-maven-pro);
    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(--scarlet-red-600);
}

.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;
}

.left-copyright {
    display: flex;
    justify-content: flex-start;
}

.items-ccenter-terms {
    display: flex;
    justify-content: flex-start;
}

.logo-sign-wrapper {
    width: 264px;
    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;
    position: relative;
}

.logo-sign-wrapper::before {
    content: '';
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-14%, -50%);
    width: 164%;
    height: 104%;
    background-size: contain;
    background-color: hsla(240, 24%, 93%, 0.39);
    background-image: radial-gradient(at 46% 58%, rgb(252, 239, 240) 0px, transparent 60%),
        radial-gradient(at 39% 20%, rgb(245, 248, 250) 0px, transparent 60%),
        radial-gradient(at 80% 0%, rgb(255, 255, 255) 0px, transparent 60%),
        radial-gradient(at 31% 83%, rgb(240, 242, 247) 0px, transparent 60%),
        radial-gradient(at 81% 86%, hsla(0, 0%, 100%, 0.692) 0px, transparent 50%);
    border-radius: 59px;
    position: absolute;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 18%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    -webkit-filter: blur(46.5px);
    -ms-filter: blur(46.5px);
    -moz--filter: blur(46.5px);
    filter: blur(46.5px);
    z-index: 1;
}

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

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

/* FOOTER END */
/* MEDIA 1920 START */
@media only screen and (min-width: 1920px) and (max-width: 1920px) {
    .col-gap-24 {
        width: 100%;
        height: 76px;
    }
}

/* MEDIA 1920 END */
/* MEDIA 1512 START */
@media only screen and (min-width: 1512px) and (max-width: 1582px) and (orientation: landscape) {
    .col-gap-24 {
        width: 100%;
        height: 78px;
    }
}

/* MEDIA 1512 END */
/* MEDIA 1366 START */
@media only screen and (min-width: 1360px) and (max-width: 1366px) and (orientation: landscape) {
    .navbar-desc .cmw-container.navbar-solid {
        width: 1254px;
        max-width: 1224px;
        margin: 0 auto;
    }

    .col-gap-24 {
        width: 100%;
        height: 78px;
    }

    .wrp-nav-item {
        min-width: 752px;

    }

    .center-container {
        max-width: 1224px;
        margin: 0 auto;
    }

    .container-slide-caption {
        max-width: 1224px;
        margin: 0 auto;
    }

    .caption-vids {
        top: 6.4%;
    }

    .row-cards-expect {
        margin-top: 24px;
    }

    .section-the-expect {
        padding: 76px 0px 86px;
    }

    .section-the-expect {
        height: auto;
        margin-top: 0;
    }

    .card-expect {
        min-height: 264px;
    }

    .wrp-img-speaker::before {
        top: -10.5%;
    }

}

/* MEDIA 1366 END */

/* MEDIA 1280 START */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (orientation: landscape) {
    .cmw-container {
        max-width: 1174px;
        margin: 0 auto;
    }

    .wrp-nav-item {
        min-width: 420px;
        width: auto;
    }

    .container-slide-caption {
        /* max-width: 1174px; */
        max-width: 95%;
        margin: 0 auto;
    }

    .caption-vids {
        top: 5.6%;
    }

    .center-container {
        /* max-width: 1174px; */
        max-width: 95%;
        margin: 0 auto;
    }

    .wrp-img-speaker::before {
        top: -14.5%;
    }

    .content-caption-center {
        padding: 24px 0px 24px 0px;
    }

}

/* MEDIA 1280 END */

/* MEDIA 1195 - 1279 START */
@media only screen and (min-width: 1195px) and (max-width: 1279px) and (orientation: landscape) {
    body {
        overflow-x: clip;
    }

    .wrp-nav-item {
        min-width: auto;
        width: auto;
    }

    .section {
        overflow-x: hidden;
    }

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

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

    .container-slide-caption {
        max-width: 1164px;
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 74px;
    }

    .card-expect {
        min-height: 330px;
    }

    .wrp-img-speaker::before {
        display: none;
    }

    .triangle-ornament-top-right {
        right: -8.6%;
    }

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

/* MEDIA 1195 - 1279 END */

/* MEDIA 1081 - 1194 START */
@media screen and (min-device-width: 1081px) and (max-device-width: 1194px) {
    body {
        overflow-x: clip;
    }

    .wrp-nav-item {
        min-width: auto;
        width: auto;
    }

    .section {
        overflow-x: hidden;
    }

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

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

    .container-slide-caption {
        max-width: 1110px;
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 74px;
    }

    .card-expect {
        min-height: 330px;
    }

    .wrp-img-speaker::before {
        display: none;
    }

    .triangle-ornament-top-right {
        right: -8.6%;
    }

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

    .right-footer .col-lg-4:last-child {
        padding-top: 24px;
        flex: 0 0 auto;
        width: 100%;
        padding-right: 32px;
    }
}

/* MEDIA 1081 - 1194 END */
/* MEDIA 1180 START */
@media only screen and (min-device-width: 1180px) and (max-device-width: 1180px) and (orientation: landscape) {
    body {
        overflow-x: clip;
    }

    .wrp-nav-item {
        min-width: auto;
        width: auto;
    }

    .section {
        overflow-x: hidden;
    }

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

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

    .container-slide-caption {
        max-width: 1164px;
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 74px;
    }

    .card-expect {
        min-height: 330px;
    }

    .wrp-img-speaker::before {
        display: none;
    }

    .triangle-ornament-top-right {
        right: -8.6%;
    }

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

/* MEDIA 1180 END */

/* MEDIA 1024-1079 START */
@media screen and (min-width: 1024px) and (max-width: 1079px) {
    body {
        overflow-x: clip;
    }

    .wrp-nav-item {
        min-width: auto;
        width: auto;
        gap: 12px;
    }

    .left-navbar .logo-brand {
        width: 100px;
    }

    .section {
        overflow-x: hidden;
    }

    .navbar-desc .cmw-container.navbar-solid {
        width: 96.64%;
    }

    .navbar-items-menu ul li a {
        font: normal 400 16.64px/22.64px var(--font-maven-pro);
        letter-spacing: -0.24px;
    }

    .navbar-flex {
        padding-left: 10px;
        padding-right: 10px;
    }

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

    .site-footer .center-container {
        max-width: 96.64%;
        margin: 0 auto;
        margin-right: auto;
        margin-left: auto;
    }

    .triangle-ornament-bottom-left {
        width: 0;
        height: 0;
        border-top-width: 104px;
        border-top-style: solid;
        border-top-color: transparent;
        border-right-width: 95px;
        border-right-style: solid;
        border-right-color: #f5fafe;
        position: absolute;
        top: 28%;
        right: 85%;
        z-index: 4;
        rotate: 180deg;
        transform: scaleX(1);
        -ms-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -webkit-transform: scaleX(1);
    }

    .container-slide-caption {
        max-width: 98.64%;
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 74px;
    }

    .card-expect {
        min-height: 330px;
    }

    .wrp-img-speaker::before {
        display: none;
    }

    .triangle-ornament-top-right {
        right: -8.6%;
    }

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

/* MEDIA 1024 END */
@media (max-width: 991px) {
    body {
        overflow-x: clip;
    }

    /* NAVBAR PAGE MOBILE START */

    .burger-mobile {
        display: flex;
        right: -8px;
        position: relative;
        top: 4px;
    }

    .navbar-desc {
        min-height: 80px;
    }

    .navbar-items-menu {
        display: none;
    }

    .left-navbar .logo-brand {
        margin-left: 4.5px;
        width: 86px;
    }

    .cta-navbar-right {
        display: none;
    }

    /* NAVBAR MOBILE START */

    /* FLIP SLIDE MENU START */
    .tab-switch-map .nav-tabs {
        gap: 16px;
    }

    .navbar-desc {
        min-height: 80px;
    }

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

    .navbar-flex {
        padding-left: 4px;
        padding-right: 0px;
    }

    /* 1. Kontainer Utama (Window) */
    .navbar-mobile-container {
        position: fixed;
        /* padding-top: 120px; */
        padding-top: 86px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 100vw;
        height: 101.5vh;
        height: calc(100vh - 2px);
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 9;
        overflow: hidden;
        border-radius: 5px;
        /* Sembunyikan by default */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;

    }

    .menu-link .icon-menu-link svg {
        fill: var(--white-one);
    }

    .menu-link.has-submenu .icon-menu-link svg {
        fill: var(--gray-800);
    }

    /* Status TERBUKA (dikontrol oleh hamburger) */
    .navbar-mobile-container.menu-is-open {
        visibility: visible;
        opacity: 1;
    }

    /* 2. Wrapper Geser (Slider) */
    /* Lvl 1 + Lvl 2 */
    /* Tinggi wrapper 100% dari parent (calc(100vh - 120px)) */
    .navbar-mobile-wrapper {
        position: relative;
        display: flex;
        width: 200%;
        /* height: auto; */
        height: 100%;
        transform: translateX(0);
        transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
        padding-left: 11px;
        padding-right: 12px;
        max-height: 96.99%;
        overflow-y: scroll;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    /* THEME TOGGLE BUTTON MOBILE START */
    .theme-toggle-mobile-wrapper {
        position: absolute;
        bottom: 88px;
        left: 20px;
        z-index: 25;
    }

    .theme-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 30px;
        border: 1.5px solid var(--gray-200);
        background: var(--white-one);
        color: var(--gray-900);
        font: 500 14px/18px var(--font-maven-pro);
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .theme-toggle-btn:hover {
        border-color: var(--gray-800);
        color: var(--gray-800);
    }

    [data-theme="dark"] .theme-toggle-btn:hover {
        border-color: var(--gray-100);
        color: #fff;
    }

    .theme-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
    }

    .theme-toggle-btn .icon-sun {
        display: none;
        color: #f59e0b;
    }

    .theme-toggle-btn .icon-moon {
        display: inline-flex;
        color: var(--gray-700);
    }

    [data-theme="dark"] .theme-toggle-btn .icon-sun {
        display: inline-flex;
    }

    [data-theme="dark"] .theme-toggle-btn .icon-moon {
        display: none;
    }

    [data-theme="dark"] .theme-toggle-btn {
        border-color: var(--gray-300);
        background: var(--gray-100);
        color: var(--gray-950);
    }

    /* THEME TOGGLE BUTTON MOBILE END */


    /* Status saat Lvl 2 aktif (digeser oleh jQuery) */
    /* Geser ke kiri */
    .navbar-mobile-wrapper.level-2-active {
        transform: translateX(-50%);
        overflow-x: hidden;
    }

    .mobile-menu-panel {
        overflow-x: hidden;
    }

    #mobileMenuContainer::before {
        content: "";
        height: 29px;
        background-color: #fff;
        top: 117px;
        width: calc(100vw - 4.89%);
        left: 0.24px;
        right: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        z-index: 10;
        position: fixed;
        margin: 0 auto;
        display: none;
    }

    #mobileMenuContainer::after {
        content: "";
        height: 29px;
        background-color: #fff;
        bottom: -0.24px;
        width: calc(100vw - 4.89%);
        left: 0.24px;
        right: 0;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        z-index: 10;
        position: absolute;
        margin: 0 auto;
        display: none;
    }

    .navbar-mobile-wrapper::after {
        content: "";
        height: 29px;
        /* background-color: #cf0000; */
        bottom: -0.24px;
        width: calc(100% - 4.89%);
        left: 0;
        right: 0;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        z-index: 10;
        position: absolute;
        margin: 0 auto;
        display: none;
    }

    /* 3. Panel (Lvl 1 & Lvl 2) */
    /* 50% dari 200% = 100% lebar layar */
    .mobile-menu-panel {
        width: 50%;
        height: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #mobile-menu-level-1 {
        left: -5px;
        position: relative;
        top: 20px;
    }

    #mobile-menu-level-2 {
        left: 6px;
        position: relative;
    }

    .mobile-menu-header {
        padding: 36px 0px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        flex-shrink: 0;
        min-height: auto;
        flex-direction: column;
        background: var(--white-one);
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom: 6px solid #fff;
        position: relative;
        bottom: -4px;
    }

    [data-theme="dark"] .mobile-menu-header {
        border-bottom-color: #0f0f0f !important;
    }

    #mobile-menu-level-1 .mobile-menu-header {
        border-bottom: none;
        min-height: auto;
        padding: 0;
    }


    .mobile-menu-content,
    .submenu-content-wrapper {
        flex-grow: 1;
        overflow-y: auto;
        padding: 15px 0px;
        background: var(--white-one);
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-radius: 5px;
    }


    .menu-link {
        display: flex;
        justify-content: space-between;
        -ms-justify-content: space-between;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding: 10px 8px;
        /* font: 400 19.24px/26.64px var(--font-maven-pro); */
        font: normal 400 17px/24px var(--font-maven-pro);
        color: #111;
        text-decoration: none;
        cursor: pointer;
        border-radius: 6px;
    }

    .mobile-menu-content .menu-link:last-child {
        margin-bottom: 86px;
    }

    .text-menu-link {
        height: auto;
    }

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

    .menu-link:hover {
        background-color: #f9f9f9;
    }

    .menu-link.has-submenu {
        position: relative;
    }

    .menu-link.has-submenu::after {
        content: '›';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        font-size: 26px;
        color: var(--scarlet-red-600);
        display: none;
    }

    /* 7. Styling Panel Lvl 2 (Submenu) */
    #mobile-menu-level-2 .back-to-level-1 {
        display: flex;
        align-items: center;
        text-decoration: none;
        font: normal 400 15.64px/21px var(--font-maven-pro);
        color: var(--scarlet-red-600);
        width: 100%;
        margin-top: 8px;
        margin-bottom: 24px;
    }

    #mobile-menu-level-2 .back-to-level-1 svg {
        margin-right: 5px;
        color: var(--color-gray-500);
    }

    #mobile-menu-level-2 #submenu-title {
        font: normal 400 18.56px/24px var(--font-maven-pro);
        color: var(--color-gray-950);
        margin: 0;
        margin-left: 15px;
        width: 100%;

    }

    .mobile-submenu-panel {
        display: none;
    }

    .mobile-submenu-panel.active {
        display: block;
    }

    .desc-submenu {
        font: normal 400 13.64/21px var(--font-maven-pro);
        color: var(--gray-500);
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        top: -6px;
        position: relative;
    }

    .desc-submenu p {
        margin-top: 0px;
    }

    .explore-desc {
        width: 100%;
        height: auto;
        font: normal 400 13.64/21px var(--font-maven-pro);
        color: var(--gray-500);
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        margin-bottom: 16px;
    }

    .explore-desc a {
        color: var(--aqua-blue-500);
        text-decoration: none;
        display: flex;
        flex-direction: row;
        justify-content: start;
        -ms-justify-content: start;
        -moz-justify-content: start;
        -webkit-justify-content: start;
    }

    .text-explore-submenu {
        font: normal 400 13.64/21px var(--font-maven-pro);
    }

    .explore-desc a .icon-18 {
        width: 24px;
    }

    .explore-desc a .icon-18 svg {
        width: 100%;
        height: auto;
        max-width: 100%;
        transform: rotate(270deg);
    }

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

    .sub-menu-list {
        list-style: none;
        padding-left: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sub-menu-list li a {
        padding: 8px 0px;
        display: block;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        background-color: var(--white-one);
        border-radius: 0px;
        font: normal 400 17px/24px var(--font-maven-pro);
        border-bottom: 1px solid #fff;
    }

    .sub-menu-list li a:hover {
        background-color: #e9e9e9;
        color: #034ea1;
    }

    .sub-menu-list:last-child {
        margin-bottom: 40px;
    }

    .navbar-align-right .btn-all-menu {
        display: none;
    }

    .hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        width: 34px;
        background-color: var(--scarlet-red-600) !important;
        height: 2px;
        transition: 0.3s ease;
    }

    header.is-scrolled .hamburger-inner,
    header.is-scrolled .hamburger-inner::after,
    header.is-scrolled .hamburger-inner::before {
        background-color: var(--scarlet-red-600);
    }

    [data-theme="dark"] .hamburger.is-active .hamburger-inner {
        background-color: #fff;
    }

    [data-theme="dark"] .hamburger.is-active .hamburger-inner::after,
    [data-theme="dark"] .hamburger.is-active .hamburger-inner::before {
        background-color: var(--scarlet-red-600) !important;
    }

    .icon-18 {
        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-right: 8px;
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        padding: 2.5px;
        width: 18px;
        margin-top: -2.4px;
    }

    /* FLIP SLIED MENU END */

    /* NAVBAR PAGE MOBILE END */
    .navbar-desc .cmw-container.navbar-solid {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .section {
        overflow-x: hidden;
    }

    .section .center-container.px-0 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 97%;
    }

    .section-speakers-home {
        overflow: hidden;
    }

    .caption-vids {
        padding-left: 15px;
        padding-right: 15px;
    }

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

    .container-slide-caption {
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }

    .row-copyright .col-md-4,
    .row-copyright .col-md-5 {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .row-copyright .col-md-8,
    .row-copyright .col-md-7 {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .row-copyright .col-md-4 .items-ccenter-terms,
    .row-copyright .col-md-5 .items-ccenter-terms {
        justify-content: center;
    }

    .row-copyright .col-md-8 .content-copyright,
    .row-copyright .col-md-7 .content-copyright {
        justify-content: center;
        margin-top: 16px;
    }

    .right-footer .col-lg-4:last-child {
        padding-top: 24px;
        flex: 0 0 auto;
        width: 100%;
        padding-right: 32px;
    }

    .right-footer .col-lg-4:last-child .register-btn-red {
        margin-top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .row-why-home {
        row-gap: 20px;
    }

    .card-why-attend {
        min-height: 348px;
    }
}

@media (max-width: 767px) {

    .name-title-speaker-side h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
        color: var(--gray-950);
    }

    .title-speaker-section h2 {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .section-hotels .col-xl-12.mb-5 .row .col-md-6 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .right-footer .col-lg-4:last-child {
        flex: 0 0 auto;
        width: 100%;
        padding-right: 13px;
    }

    .section-about-home .glit-ornament-04 {
        width: 50px;
    }

    .desktop-language {
        position: relative;
        margin-left: 12px;
        right: -8px;
    }

    .card-search-dialog {
        width: 100%;
        padding: 20px 15px;
        min-height: 132px;
        min-height: 91vh;
        max-height: 91vh;
        top: 120px;
    }

    .search-page input.form-control {
        padding: 14px 15px 14px 15px;
        height: 56px;
        font: normal 400 17px/28.64px var(--font-maven-pro);
    }

    .text-search-btn {
        display: none;
    }

    .section .center-container.px-0 {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .center-container.px-0 {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    /* HERO SECTION MOBILE START */

    .hero-section {
        overflow: hidden;
        height: 102vh !important;
    }

    #carouselPrimary {
        height: 102vh !important;

    }

    #carouselPrimary .slick-track,
    #carouselPrimary .slick-list {
        height: 102vh !important;

    }

    .container-slide-caption {
        width: 96%;
        margin: 0 auto;
        flex-direction: column;
        padding: 0 10px 10px 10px;
    }

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

    .content-caption-hero h1 {
        font: 600 30px/33.5px var(--font-maven-pro);
    }

    .icon-map-event {
        width: 20px;
        height: 20px;
    }

    .content-caption-hero {
        font: 500 16.24px/21px var(--font-maven-pro);
    }

    .location-hero-caption {
        font: 400 14.5px/20px var(--font-maven-pro);
    }

    .register-btn {
        font: 500 16.24px/21px var(--font-maven-pro);
        padding: 17px 56px;
        width: 100%;
    }

    /* HERO SECTION MOBILE END */
    /* SECTION SPEAKER HOME MOBILE START */
    .label-sponsor {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .title-section-page {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .title-section-page h2 {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .large-title-section {
        padding-right: 15px;
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .thumbnail-section-about {
        margin-top: 48px;
    }

    .large-title-section h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }


    .section-speakers-home {
        overflow-x: hidden;
    }

    .right-speaker-home {
        min-height: 564px;
        padding: 5px 0px 32px;
    }

    .desc-speaker-list {
        width: 100%;
    }

    .triangle-ornament-bottom-right {
        right: -26.64%;
        border-top-width: 154px;
        border-right-width: 170px;
        bottom: -2%;
    }

    .glitch-ornament-faded-1 {
        width: 64px;
        height: 64px;
        position: absolute;
        z-index: 4;
        bottom: 31%;
        right: -10px;
    }

    .name-large {
        padding: 15px 20px 5px 15px;
    }

    .speaker-title-large {
        padding: 5px 15px 5px 15px;
        font: 400 17px/22px var(--font-maven-pro);
    }

    .speaker-materials {
        font: 400 19.5px/26px var(--font-maven-pro);
    }

    .wrp-img-speaker img {
        max-width: 113%;
    }

    .wrp-img-speaker {
        width: 92.6%;
        left: -8%;
    }

    .speaker-materials {
        padding: 0px 15px 15px 15px;
    }

    .speaker-flex .col-lg-7 {
        order: 2;
    }

    .speaker-flex .col-lg-5 {
        order: 1;
    }

    .wrp-img-speaker::before {
        top: -26.5%;
        left: 5%;
        height: 136px;
    }

    .title-mobile-speaker {
        display: flex;
        width: 100%;
    }

    .speaker-flex {
        display: flex;
        gap: 18px;
    }

    .triangle-ornament-top-right {
        border-top-width: 114px;
        border-right-width: 96px;
        top: -24%;
        right: -5%;
        rotate: 180deg;
        transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        border-right-style: solid;
        border-right-color: #f5fafe;
    }

    .triangle-ornament-center-right {
        top: 21%;
        right: -9.5%;
        border-right-color: #f5fafe;
        border-top-width: 80px;
        border-right-width: 70px;
    }

    .people-speaker-small {
        width: 106px;
    }

    .people-speaker-small::after {
        content: "";
        width: 106px;
        min-height: 60px;
    }

    .people-speaker-small::before {
        content: "";
        width: 106px;
        min-height: 60px;
    }

    .people-small-red {
        width: 106px;
        max-height: 116px;
    }

    .speaker-name-title {
        position: absolute;
        width: 106px;
        top: 136px;
    }

    .left-speaker-list {
        padding: 48px 0px 100px;
        margin-top: -45px;
    }

    .teks-after-small-speakers {
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .subdesc-the-number {
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .wrp-card-speaker {
        gap: 10px;
    }

    .teks-after-small-speakers {
        width: 100%;
        padding-right: 0px;
    }

    .subdesc-the-number {
        width: 100%;
    }

    .wrp-numbering .row {
        row-gap: 32px;
    }

    .wrp-card-the-number {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .wrp-speakers-verticals .wrp-left-speaker {
        display: none;
    }

    .glit-ornament-01 {
        width: 48px;
    }

    .glit-ornament-02 {
        width: 30px;
    }

    /* .wrp-left-speaker {
        display: flex;
    } */
    .row-why-home.gutter--18.row,
    .row-why-home.gutter--18.container,
    .row-why-home.gutter--18.container-fluid {
        margin-left: -4px;
        margin-right: -4px;
    }

    .gutter--18>[class^="col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }



    .speaker-title {
        font: 400 12.56px/16px var(--font-maven-pro);
        letter-spacing: -0.86px;
    }

    /* SECTION SPEAKER HOME MOBILE END */

    /* SECTION WHY ATTEND HOME MOBILE START  */
    .section-why-attend-home {
        overflow-x: hidden;
    }

    .row-why-home {
        row-gap: 24px;
    }

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

    .title-card-attend h2 {
        font: normal 500 18.52px/23.65px var(--font-maven-pro);
        letter-spacing: -0.98px;
        margin-bottom: 8px;
    }

    .card-why-attend {
        width: 100%;
        padding: 15px 8px;
        min-height: 324px;
    }

    .card-why-attend.card-why-attend {
        width: 100%;
        padding: 30px 24px;
        background: var(--white-one);
        border-radius: 8px;
        min-height: 196px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .card-why-attend.card-why-attend .title-card-attend h2 {
        font: normal 500 20px/24.65px var(--font-maven-pro);
    }

    #about .section-why-home .card-why-attend .title-card-attend h2 {
        text-align: justify;
        width: 100%;
    }

    .subdesc-why-attend {
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .desc-why-attend {
        font: normal 400 16.64px/21.64px var(--font-maven-pro);
        letter-spacing: -0.76px;
    }

    .subdesc-the-number {
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .title-value-number h2 {
        font: 600 40px/42px var(--font-maven-pro);
        letter-spacing: -0.74px;
    }

    .subdesc-the-number {
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .wrp-numbering .row {
        row-gap: 20px;
    }

    .subtitle-desc-number {
        font: 400 17.24px/24px var(--font-maven-pro);
        letter-spacing: -0.76px;
        width: 100%;
        padding-right: 48px;
    }

    .wrp-fit-content {
        flex-direction: column;
    }

    .title-why-attend h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .title-countdown-white h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .label-text-cta {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .number-of-counter {
        font: 500 36px/38.5px var(--font-maven-pro);
    }

    .dots-separator {
        font: 500 36px/38.5px var(--font-maven-pro);
    }

    .counter-time-day {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

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

    .title-number-home h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .title-number-home h2 span {
        color: var(--scarlet-red-600);
    }

    .subtitle-number-home {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .left-sentence-cta {
        font: normal 500 18.52px/23.65px var(--font-maven-pro);
        width: 100%;
    }

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

    .cta-why-attend .cta-red-button {
        width: 100%;
    }

    .wrp-horizontal-cta .wrp-fit-content {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .register-btn-red {
        font: 500 16.24px/21px var(--font-maven-pro);
        padding: 17px 56px;
        width: 100%;
    }

    .large-title-section h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    /* SECTION WHY ATTEND HOME MOBILE END  */


    /* AGENDA MOBILE START */

    .right-day-room {
        padding: 15px 15px;
    }

    .vanue-room span {
        font: 400 16px/13.64px var(--font-maven-pro);
    }

    .vanue-room p {
        font: 400 15px/17px var(--font-maven-pro);
    }

    .right-day-room .card-day-icon {
        display: none;
    }

    .event-d-m-y {
        display: none;
    }

    .wrp-card-agenda-new .rowing:nth-of-type(2n+1) .agenda-left-content {
        padding: 15px 10px 10px 15px;
    }

    .spesification-date-event .place-room-label.menu-link:nth-child(1) {
        width: 48%;
    }

    .spesification-date-event .place-room-label.menu-link:nth-child(2) {
        width: 48%;
    }

    .place-time-duration {
        flex-wrap: wrap;
    }

    .card-day-icon {
        width: 74px;
        height: 69px;
    }

    .place-time-duration {
        row-gap: 0;
        column-gap: 16px;
    }

    .day-time-as {
        flex-wrap: wrap;
        gap: 0;
        row-gap: 5px;
        column-gap: 18px;
    }

    .day-time-as .place-room-label:nth-child(1) {
        width: 100%;
    }

    .desc-day-val .card-day-icon {
        width: 64px;
        height: 60px;
    }

    .designation-as {
        margin-top: 8px;
        display: flex;
        align-items: center;
    }

    .event-d-m-y {
        font: 500 21px/28px var(--font-maven-pro);
    }

    .section-agenda-filter .wrp-card-agenda-new {
        padding: 6px 18px 15px 18px;
    }

    .flex-session-transition {
        padding: 15px 15px 5px 15px;
    }

    .right-break-session {
        padding: 6px 15px 4px 15px;
    }

    .title-session-day {
        width: 100%;
    }

    .mobile-day-val {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 15px;
    }

    .mobile-day-val .card-day-icon {
        display: flex;
    }

    .mobile-day-val .event-d-m-y {
        display: flex;
    }

    .spesification-date-event .place-room-label.menu-link:nth-child(3) {
        width: 100%;
    }

    .wrp-card-agenda-new .rowing {
        padding-left: 0;
        padding-right: 0;
    }

    .tracked {
        margin-top: 10px;
    }

    .tracked .icon-24 {
        width: 16px;
    }

    .wrp-circle-avatar {
        width: fit-content;
        max-width: 100%;
        margin-top: 16px;
    }

    .avatar-people {
        width: 40px;
        height: 40px;
    }

    .plus-speaker {
        width: 40px;
        height: 40px;
    }

    .agenda-left-content a {
        font: 400 15px/20px var(--font-maven-pro);
    }

    .row-desc-info-room .col-md-8 {
        flex: 0 0 auto;
        width: 75.5%;
    }

    .wrp-card-paralel {
        padding: 15px 15px 20px 15px;
    }

    .row-desc-info-room {
        position: relative;
    }

    .row-desc-info-room .col-md-3 {
        flex: 0 0 auto;
        width: 32%;
        position: absolute;
        right: -18px;
        top: 30%;
    }

    .wrp-event-parallel>.card-event-parallel {
        flex: 0 0 256px;
        scroll-snap-align: start;
    }

    .card-event-parallel {
        min-width: 256px;
        width: 256px;
        padding: 6px 14px 18px 14px;
    }

    .wrp-card-agenda-new {
        padding: 10px 4px;
    }

    .title-parallel-event a h2 {
        font: 500 20px/22.32px var(--font-maven-pro);
    }

    .agenda-left-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .agenda-right-content {
        padding-left: 0;
        margin-top: 30px;
    }

    .agenda-left-content {
        padding-right: 0;
    }

    .title-agenda-left h2 {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .head-side-content {
        width: 100%;
        padding: 8px 5px 8px 0px;
    }

    .wrp-desc-season {
        padding: 20px 15px;
    }

    .col-md-5 .day-tagged {
        margin-top: 24px;
    }

    .wraper-speaker-agenda {
        gap: 0;
        row-gap: 10px;
    }

    .wraper-speaker-agenda {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: start;
    }

    .avatar-speaker-agenda {
        width: 45px;
        height: 45px;
    }

    .name-speaker-agenda {
        width: auto;
        max-width: 64%;
        /* font: 500 18.5px/19.5px var(--font-maven-pro); */
        font: 500 16.12px/19.5px var(--font-maven-pro);
        letter-spacing: -0.64px;
    }

    .speaker-agenda-left {
        display: flex;
        align-items: start;
        width: 50%;
        gap: 8px;
        min-height: 104px;
    }

    .speaker-agenda-left:only-child {
        width: 100%;
    }

    .name-speaker-agenda em {
        /* font: 400 14px/15.64px var(--font-maven-pro); */
        font: 400 13.24px/14.64px var(--font-maven-pro);
        letter-spacing: -0.38px;
    }

    .desc-agenda-left {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .wrp-time-room {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .title-summary-schedule {
        font: 400 24px/31px var(--font-maven-pro);
    }

    .day-shwoing-title h2 {
        font: 500 31px/33.5px var(--font-maven-pro);
    }

    .month {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .day-and-date {
        font: normal 400 17px/24px var(--font-maven-pro);
    }

    .wrp-summary-schedule {
        padding-left: 0;
        margin-top: 24px;
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .card-toas-notice {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        align-items: start;
        font: 400 16.24px/21px var(--font-maven-pro);
        padding: 16px 16px;
    }

    .right-notice {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .right-header-agenda {
        width: 100%;
        min-height: unset;
        height: auto;
        padding: 86px 0px 30px 0px;
    }

    .left-header-agenda {
        width: 100%;
        min-height: unset;
        height: auto;
        padding: 156px 0px 24px 0px;
    }

    .subtitle-header-agenda h2 {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .wrp-time-room {
        width: 52%;
        gap: 18px;
    }

    .day-and-date {
        width: 48%;
        min-height: 168px;
    }

    .day-agenda-value {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .day-agenda-value p {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .date {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .content-category-agenda span {
        font: 400 14.56px/20.64px var(--font-maven-pro) !important;
    }

    .icon-24 {
        padding: 1px;
    }

    .more-agenda a {
        font: normal 400 16.64px/24px var(--font-maven-pro);
    }

    .day-value {
        font: 400 16.24px/21px var(--font-maven-pro);
    }

    .filter-tab-day ul li a.active .day-value {
        font: 400 16.24px/21px var(--font-maven-pro);

    }

    /* AGENDA MOBILE END */



    /* SECTION DETAIL SPEAKER MOBILE START */
    .container-side {
        max-width: 98%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .main-content-speaker {
        padding: 8px 0px;
        overflow-x: hidden;
    }

    .left-speaker-side {
        position: relative;
        width: 100%;
        min-height: 440px;
        overflow-x: unset;
        border-bottom-left-radius: 16px;
        display: flex;
        width: 100%;
        height: auto;
        padding: 5px 0px 36px;
    }

    .left-speaker-side .wrp-img-speaker img {
        max-width: 110%;
    }

    .right-name-speaker {
        padding: 8px 0px;
    }

    .left-speaker-side .wrp-img-speaker {
        width: 92.6%;
        left: -4%;
        bottom: -12.64%;
    }

    .left-speaker-side .triangle-ornament-top-right {
        width: 0;
        height: 0;
        border-top-width: 48px;
        border-top-style: solid;
        border-top-color: transparent;
        border-right-width: 43px;
        border-right-style: solid;
        border-right-color: #f5fafe;
        position: absolute;
        top: 1.4%;
        right: -1%;
        z-index: 4;
        rotate: 180deg;
        transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
    }

    .section-detail-speakers .container-side .main-content-speaker .speaker-agenda-left {
        display: flex;
        align-items: start;
        width: 100%;
        gap: 8px;
        min-height: 24px;
    }

    .section-detail-speakers .container-side .main-content-speaker .name-speaker-agenda {
        width: auto;
        max-width: 97%;
    }

    /* SECTION DETAIL SPEAKER MOBILE END */


    /* HOTELS MOBILE START */
    .wrp-hotel-desc {
        margin-top: 16px;
    }

    .row-why-home.gutter--24.row,
    .row-why-home.gutter--24.container,
    .row-why-home.gutter--24.container-fluid {
        margin-left: -14px;
        margin-right: -14px;
    }

    .gutter--24>[class^="col-"] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .section-hotels .row .col-12.pt-4.mt-2.mb-5 {
        display: flex;
        margin-top: 30px !important;
        padding-top: 0px !important;
        width: 100%;
        justify-content: center;
    }

    .section-hotels .row-gap-48 {
        width: auto;
    }

    .right-column-hotels {
        min-height: 360px;
    }

    .wrp-title-hotels h2 {
        font: 500 30px/32.5px var(--font-maven-pro);
        padding-right: 38px;
    }

    .section-hotels .row .col-12.pt-4.mt-2.mb-5 .row {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }

    .section-hotels .row-gap-48 {
        row-gap: 24px;
    }

    .price-per-night::before {
        left: -50%;
        position: absolute;
        top: 0;
    }

    /* HOTELS MOBILE END */

    /* MOBILE ABOUT PROGRAM START  */


    .home-ornament-webbing-one {
        width: 48px;
        height: 48px;
        bottom: 2.5%;
    }

    .home-ornament-webbing-two {
        width: 40px;
        height: 40px;
        bottom: 81.5%;
        left: 0.64%;
    }

    .section-about-home .glit-ornament-07 {
        right: 79%;
        width: 52px;
    }

    .section-about-home .glit-ornament-03 {
        width: 56px;
    }

    .wavy-blur-one {
        width: 36%;
        height: 356px;
        bottom: -16%;
        opacity: 0.9;
    }

    .wavy-blur-two {
        bottom: 3.5%;
    }

    /* MOBILE ABOUT PROGRAM END  */


    .wrp-date-col {
        font: 500 30px/33.5px var(--font-maven-pro);
    }

    .wrp-date-text {
        font: 500 18.24px/20px var(--font-cascadia-code);
    }

    .count-timer-hero {
        justify-content: center;
    }

    .counter-bg {
        position: absolute;
        z-index: -1;
        width: 76px;
        height: auto;
    }

    /* SMOOTH TRANSITION MENU MOBILE 767 START */
    /* State awal item menu saat tertutup / collapsed: transparan & tergeser ke kanan */
    .mobile-menu-content .menu-link {
        opacity: 0;
        transform: translate3d(60px, 0, 0);
        will-change: opacity, transform;
    }

    /* Keyframe animasi transisi faded dari kanan ke kiri hingga tersusun rapi di paling kiri */
    @keyframes mobileMenuLinkSlideInRight {
        0% {
            opacity: 0;
            transform: translate3d(60px, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    /* Ketika menu mobile terbuka (.menu-is-open), setiap .menu-link menjalankan animasi slideInFromRight */
    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link {
        animation: mobileMenuLinkSlideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* Perbedaan delay transisi berurutan (staggered delay) dengan selisih waktu sepersekian detik dari atas ke bawah */
    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(1) {
        animation-delay: 0.08s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(2) {
        animation-delay: 0.15s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(3) {
        animation-delay: 0.22s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(4) {
        animation-delay: 0.29s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(5) {
        animation-delay: 0.36s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(6) {
        animation-delay: 0.43s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(7) {
        animation-delay: 0.50s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(8) {
        animation-delay: 0.57s;
    }

    .navbar-mobile-container.menu-is-open .mobile-menu-content .menu-link:nth-child(n+9) {
        animation-delay: calc(0.07s * var(--item-index, 8));
    }

    /* Saat menu ditutup/collapse, hentikan animasi & kembalikan ke state awal tersembunyi */
    .navbar-mobile-container:not(.menu-is-open) .mobile-menu-content .menu-link {
        animation: none !important;
        opacity: 0;
        transform: translate3d(60px, 0, 0);
    }

    /* SMOOTH TRANSITION MENU MOBILE 767 END */

    /* .section-upcoming .row.gutter--18.row,
    .section-upcoming .row.gutter--18.container,
    .section-upcoming .row.gutter--18.container-fluid {
        margin-left: -20px !important;
        margin-right: -20px !important;
    } */

    .label-countdown-small {
        font: 400 17.24px/20.56px var(--font-maven-pro);
    }

    .section-upcoming .gutter--18>[class^="col-"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .col-countdown-small {
        padding: 15px 0px;
    }

    .card-upcoming {
        padding: 30px 20px 36px 20px;
    }

    .thumb-title-upcoming {
        padding: 24px 20px;
    }

    .card-fairmont {
        margin-bottom: 24px;
    }

    .val-countdown-small {
        font: 500 31px/35.5px var(--font-maven-pro);
        padding: 15px 2px;
    }

    /* FOOTER PAGE MOBILE START */

    .site-footer {
        padding-top: 86px;
    }

    .site-footer .center-container.px-0 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .site-footer .footer-brand {
        margin-bottom: 18px;
    }

    .site-footer .footer-brand .logo-brand {
        margin-left: 0px;
    }

    .row-copyright {
        width: auto;
        padding-top: 36px;
        padding-bottom: 14px;
    }

    .items-ccenter-terms ul {
        gap: 20px;
    }

    .logo-sign-wrapper img {
        top: -32px;
        position: relative;
    }

    .row-sign-logo {
        width: auto;
    }

    .card-expect {
        display: flex;
        width: 100%;
        height: auto;
        padding: 43px 30px 30px 30px;
    }

    .expect-icon {
        width: 70px;
    }

    .wrp-title-expect-icon {
        padding-right: 0px;
    }

    .title-expect-card {
        width: 94.56%;
    }

    .title-number-home {
        margin-bottom: 16px;
    }

    .title-expect-card h2 {
        font: 500 24px/31px var(--font-maven-pro);
    }

    .title-expect-card h2 span {
        color: var(--scarlet-red-600);
    }

    .logo-sign-wrapper {
        padding-right: 16px;
        padding-left: 16px;
        width: 220px;
    }

    .site-footer .items-ccenter-terms ul li a {
        font: normal 400 16.24px/22px var(--font-maven-pro);
        color: var(--gray-500);
        letter-spacing: -0.64px;
    }

    .row-column-email {
        margin-bottom: 24px;
    }

    /* .right-footer .row .col-lg-4:nth-child(1 of .col-lg-4) {
        height: auto;
    } */

    .header-modular-page {
        height: 64.86vh;
    }

    .right-footer .row {
        gap: 24px;
    }

    .item-link-footer ul li a {
        font: normal 400 17px/24px var(--font-maven-pro);
    }

    .footer-contact-label {
        font: 400 16.24px/23px var(--font-maven-pro);
    }

    .footer-contact-value {
        font: normal 400 17px/24px var(--font-maven-pro);
    }

    .content-copyright {
        margin-top: 24px;
        font: 400 16.24px/23px var(--font-maven-pro);
        text-align: center;
    }

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

    /* FOOTER PAGE MOBILE END */
}