:root {
    --sunsetorange: #ef4600;
    --sunsetorange1: #ff815d;
    --sunsetpink: #ff5046;
    --sunset: #0b9887;
    --sunset1: #144351;
    --sunset2: #ffa180;
    --sunset3: #fbbd46;
    --sunset4: #ffa01d;
    --sunset5: #1e9dbf;
    --sunset6: #f28e65;
    --sunset7: #096c7e;
    --bg-bali: #E3926D;
    --bg-purwodadi: #2F6A7C;
    --bg-cibodas: #4B9ABA;
    --bg-bogor: #FBBD46;

    /* Dev v-2 */
    --bg-v2-pink: #E85392;
    --bg-v2-purple: #473C79;
    --bg-v2-blue: #00B4DD;
    --bg-v2-cyan: #A7D4F7;
    --bg-v2-cyan1: #51B3DC;
    --bg-v2-green: #00C1AA;

    /* End Dev v-2 */

    /* 2026 */
    --bg-2026-yellow: #FFD04B;
    --bg-2026-orange: #FA5B01;
    --bg-2026-blue: #00AEFF;
    --bg-2026-green: #05a166;
    /* End 2026 */
}

/* Definisikan REGULAR (bobot: 400/normal) */
@font-face {
    font-family: 'font-new';
    /* NAMA KELUARGA SAMA */
    src: url('../fonts/Chaloops-Regular.ttf') format('truetype');
    font-weight: normal;
    /* atau 400 */
    font-style: normal;
    font-display: swap;
}

/* Definisikan BOLD (bobot: 700/bold) */
@font-face {
    font-family: 'font-new';
    /* NAMA KELUARGA SAMA */
    src: url('../fonts/Chaloops-Bold.ttf') format('truetype');
    font-weight: bold;
    /* atau 700 */
    font-style: normal;
    font-display: swap;
}

/* font-family: 'Phudu', sans-serif; */

.bg-2026-orange {
    background-color: var(--bg-2026-orange);
}

.bg-2026-yellow {
    background-color: var(--bg-2026-yellow);
}

.bg-2026-blue {
    background-color: var(--bg-2026-blue);
}

.bg-2026-green {
    background-color: var(--bg-2026-green);
}

.bg-bogor {
    background: var(--bg-bogor);
}

.bg-cibodas {
    background: var(--bg-cibodas);
}

.bg-purwodadi {
    background: var(--bg-purwodadi);
}

.bg-bali {
    background: var(--bg-bali);
}

.bg-orange {
    background: var(--sunset2);
}

.bg-green {
    background: var(--sunset);
}

.bg-green1 {
    background: var(--sunset1);
}

.bg-orange1 {
    background-color: var(--sunset3);
}

.bg-orange2 {
    background-color: var(--sunset4);
}

.bg-blue {
    background-color: var(--sunset5);
}

.bg-pink {
    background-color: var(--sunset6);
}

.bg-olive {
    background-color: var(--sunset7);
}

/* dev v-2 */
.background-pink {
    background-color: var(--bg-v2-pink);
}

.background-green {
    background-color: var(--bg-v2-green);
}

.background-green-gradient {
    background: rgb(0, 193, 170);
    background: linear-gradient(180deg, rgba(0, 193, 170, 1) 36%, rgba(206, 234, 248, 1) 100%);
}

.background-blue-gradient {
    background: rgb(206, 234, 248);
    background: linear-gradient(180deg, rgba(206, 234, 248, 1) 0%, rgba(0, 180, 221, 1) 46%);
}

.background-blue-gradient-2026 {
    background: rgb(95, 189, 236);
    background: linear-gradient(180deg, rgb(85, 182, 231) 0%, rgb(204, 239, 247) 46%);
}

.background-blue-gradient-2 {
    background: rgb(0, 180, 221);
    background: linear-gradient(360deg, rgba(0, 180, 221, 1) 0%, rgba(255, 255, 255, 1) 85%);
}

.background-cyan {
    background-color: var(--bg-v2-cyan);
}

.background-cyan-news {
    background-color: #0fb8e2;
}

.background-purple {
    margin-top: -1%;
    background-color: var(--bg-v2-purple);
}

.background-blue {
    background-color: var(--bg-v2-blue);
}

/* end dev v-2 */

html,
body {
    height: 100%;
    font-family: "National Park", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #CEEAF8;
    font-optical-sizing: auto;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: white;
    font-weight: 400;
    font-family: "Caesar Dressing", sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: #fff;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/


.title-text h2 {
    text-align: left;
    font-size: 0px;
    font-weight: 700;
    color: white;
    margin-left: 1%;
    letter-spacing: 2px;
    margin-top: 3%;
    margin-right: 3%;
}

.title-text img {
    margin-top: -30px;
}

.section-title {
    text-align: left;
    /* margin: 3%; */
    margin-top: 3%;
    /* margin-right: 3%; */
    /* margin-bottom: 3%; */
}

.section-title h1 {
    font-size: 50px;
    font-weight: bold;
    color: #473C79;
    margin-left: 1%;
    /* letter-spacing: 1px; */
    font-family: 'font-new', sans-serif;
    text-transform: uppercase;
}

.section-title h2 {
    font-size: 30px;
    font-weight: bold;
    color: #473C79;
    margin-left: 1%;
    font-family: 'font-new', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title h3 {
    font-size: 20px;
    font-weight: 600;
    color: #473C79;
    margin-left: 1%;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.section-title h5 {
    font-size: 18px;
    font-weight: 500;
    color: #473C79;
    margin-left: 1%;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.section-title p {
    font-size: 14px;
    margin-left: 1%;
    letter-spacing: 1px;
    color: #473C79;
    margin-bottom: 2px;
    text-align: justify;
}

.news-title {
    font-family: 'National Park', sans-serif;
    color: #473C79;
    font-size: 12px;
    font-weight: 500;
    color: #473C79;
    margin-left: 1%;
    letter-spacing: 1px;
    text-align: center;

}


.news-title h5 {
    font-family: 'National Park', sans-serif;
    color: #473C79;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 2px;
}

.news-title p {
    margin-top: 5px;
    font-size: 12px;
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.spad {
    padding-top: 50px;
    /* padding-bottom: 100px; */
}

.spad-2 {
    padding-top: 50px;
    padding-bottom: 70px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #fff;
}

.text-purple h1,
.text-purple h2,
.text-purple h3,
.text-purple h4,
.text-purple h5,
.text-purple h6,
.text-purple p,
.text-purple span,
.text-purple li,
.text-purple a {
    font-family: 'National Park', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #473C79;
    margin-bottom: 3%;
}

.bg-gradient,
.bd-text .bd-tag-share .s-share a:hover,
.bh-text .play-btn,
.schedule-table-tab .nav-tabs .nav-item .nav-link.active,
.newslatter-inner .ni-form button,
.latest-item .li-tag,
.price-item .price-btn:hover,
.price-item .pi-price,
.price-item .tr-tag,
.schedule-tab .nav-tabs .nav-item .nav-link.active,
.site-btn {
    /* background-image: -o-linear-gradient(330deg, #ee8425 0%, #f9488b 100%), -o-linear-gradient(330deg, #ee8425 0%, #f9488b 100%);
    background-image: linear-gradient(120deg, #ee8425 0%, #f9488b 100%), linear-gradient(120deg, #ee8425 0%, #f9488b 100%); */
    background: var(--sunset1);
}

/* buttons */
.btn-signin {
    border: none;
    box-shadow: none;
    display: inline-block;
    background-color: var(--sunset1);
    color: white;
}

.btn-s {
    background: var(--sunset1);
    color: white;
}

.btn-s:hover {
    background: #03316e;

}

.primary-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 40px;
    color: #ffffff;
    text-align: center;
    border-radius: 50px;
    /* background-image: -webkit-gradient(linear, left top, right top, from(#ee8425), to(#f9488b)), -webkit-gradient(linear, left top, right top, from(#ee8425), to(#f9488b));
    background-image: -o-linear-gradient(left, #ee8425 0%, #f9488b 100%), -o-linear-gradient(left, #ee8425 0%, #f9488b 100%);
    background-image: linear-gradient(to right, #ee8425 0%, #f9488b 100%), linear-gradient(to right, #ee8425 0%, #f9488b 100%); */
    background-image: var(--sunset1);
}

.site-btn {
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;
    border: none;
    padding: 10px 40px 12px;
    border-radius: 50px;
}

/* Preloder */

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999999;
    background: var(--bg-2026-orange);

}

/*
.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #45462a;
        border-left-color: transparent;
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #45462a;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #45462a;
        border-left-color: transparent;
    }

    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }

    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #45462a;
        border-left-color: transparent;
    }
}  */


.loader {
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background: url(../img/dev-2/motion-loading.gif) center center no-repeat;
    background-size: 100px;

}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*---------------------
  Header
-----------------------*/

.header-section {
    z-index: 999999;
    display: -webkit-box;
    display: -ms-flexbox;
}

.header-section.header-normal {
    border-bottom: 1px solid #e5e5e5;
}

.logo {
    float: left;
    padding-top: 5px;
    /* padding-bottom: 37px; */
}

.logo a {
    display: inline-block;
}

.logos {
    float: center;
    /* padding-top: 10px; */
    /* padding-bottom: 37px; */
}

.head-logo {
    margin-right: 5%;
}

.logos a {
    display: inline-block;
}

.nav-menu {
    float: left;
    margin-left: 5%;
    color: white;
    font-family: 'font-new', sans-serif;
    font-weight: bold;
}

/* text main */
.nav-menu .mainmenu {
    display: block;
    color: white;
    margin-top: 2%;
    /* margin-left: 40px; */
}

.nav-menu .mainmenu ul li {
    color: white;
    display: inline-block;
    list-style: none;
    margin-right: 10px;
    position: relative;
}

.nav-menu .mainmenu ul li:hover a {
    color: #BFEDFE;
    -webkit-text-stroke: 0.5px black;
    /* stroke hitam */
    /* fallback (non-standard) */
}


.nav-menu .mainmenu ul li .dropdown {
    position: absolute;
    width: block;
    background: var(--bg-2026-orange);
    z-index: -991;
    left: -30px;
    top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 4px 13px 30px rgba(0, 0, 0, 0.15);
    box-shadow: 4px 13px 30px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin-top: -50px;

}

.nav-menu .mainmenu ul li .dropdown li {
    display: block;
    margin-right: 10px;
}

/* fitur dropdown */
.nav-menu .mainmenu ul li .dropdown li a {
    padding: 10px 16px;
    display: block;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-transform: capitalize;
    color: white;
    font-size: 16px;
    /* margin-top: 10%; */
}

.nav-menu .mainmenu ul li .dropdown li a:hover {
    color: #BFEDFE;
    -webkit-text-stroke: 0.5px black;
}

.nav-menu .mainmenu ul li .dropdown li a:after {
    display: none;
}

.nav-menu .mainmenu ul li.active a:after {
    opacity: 1;
}

.nav-menu .mainmenu ul li:hover>a:after {
    opacity: 1;
}

.nav-menu .mainmenu ul li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    top: 100px;
}

.nav-menu .mainmenu ul li a {
    font-size: 15px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    /* padding: 42px 0; */
    padding-right: 15px;
    padding-bottom: 42px;
    position: relative;
    display: inline-block;
    letter-spacing: 1px;
}

/* line text navbar */
.nav-menu .mainmenu ul li a:after {
    position: absolute;
    left: 0;
    bottom: 36px;
    height: 2px;
    width: 100%;
    /* background: var(--sunset2); */
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.nav-menu .primary-btn.top-btn {
    margin: 27px 0;
}

.slicknav_menu {
    display: none;
    color: white;
    background-color: white;
}

/*---------------------
  Conter
-----------------------*/

.counter-section {
    padding: 40px 0;
}

.counter-section .counter-text span {
    font-size: 16px;
    color: #ffffff;
}

.counter-section .counter-text h3 {
    color: #ffffff;
    font-weight: 700;
    line-height: 38px;
    margin-top: 10px;
}

.counter-section .cd-timer {
    text-align: right;
}

.center {
    justify-content: center;
    text-align: center;
}

.center-items {
    justify-content: center;
    text-align: center;
}

.center-items img {
    margin-top: 3%;
    margin-bottom: 3%;
    height: 100px;
    align-items: center;
}

.m-mobile {
    padding-top: 30%;
}

.m-desktop {
    padding-top: 5%;
}

.counter-section .cd-timer .cd-item {
    display: inline-block;
    text-align: center;
    margin-left: 35px;
    height: 120px;
    width: 120px;
    padding-top: 32px;
    position: relative;
}

.counter-section .cd-timer .cd-item:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #ffffff;
    content: "";
    opacity: 0.1;
    border-radius: 4px;
}

.counter-section .cd-timer .cd-item:first-child {
    margin-left: 0;
}

.counter-section .cd-timer .cd-item span {
    font-size: 60px;
    color: #ffffff;
    font-weight: 600;
    line-height: 30px;
}

.counter-section .cd-timer .cd-item p {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 0;
    line-height: 30px;
}

/*---------------------
  Home About Section
-----------------------*/

.home-about-section {
    /* padding-bottom: 20px;
    margin: 3%; */
    margin-right: 3%;
    margin-left: 3%;
}

.ha-pic {
    -webkit-box-shadow: 0px 0px 30px rgba(11, 12, 48, 0.15);
    box-shadow: 0px 0px 30px rgba(11, 12, 48, 0.15);
    margin-right: 30px;
}

.ha-pic img {
    min-width: 100%;
    border-radius: 2px;
}

.ha-picx img {
    min-width: 100%;
    border-radius: 2px;
}

.ha-text {
    padding-top: 30px;
}

.ha-text h3 {
    color: var(--sunset);
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-left: 1%;
}

.ha-text p {
    margin-bottom: 21px;
}

.ha-text ul {
    margin-bottom: 27px;
}

.ha-text ul li {
    list-style: none;
    font-size: 16px;
    line-height: 30px;
    color: #6a6b7c;
}

.ha-text ul li span {
    color: #45462a;
}

.ha-text .ha-btn {
    font-size: 16px;
    color: #171822;
    font-weight: 600;
    position: relative;
}

.ha-text .ha-btn:before {
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 100%;
    /* background: #f44949; */
    content: "";
}

.ha-text .ha-btn:hover {
    background-color: #673ab7;
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 100%;
    /* background: #f44949; */
    content: "";
}

/*---------------------
  Footer
-----------------------*/

.footer-section {
    background: var(--sunset1);
}

.footer-section h1 {
    background: var(--sunset1);
}

.partner-logo {
    padding-bottom: 50px;
    border-bottom: 1px solid #2f3039;
}

.partner-logo .pl-table {
    display: inline-block;
    display: table;
}

.partner-logo .pl-table .pl-tablecell {
    display: table-cell;
    vertical-align: middle;
    height: 41px;
}

.footer-text {
    color: var(--bg-2026-blue);

    text-align: center;
    padding-top: 20px;
}

.footer-text a {
    color: red;
}

.footer-text-bottom p {
    margin-top: 5%;
    margin-bottom: -10%;
    text-align: center;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
}

.footer-contact-us p {
    margin-top: 10%;
    text-align: center;
    color: white;
    font-size: 10px;

}

.footer-contact-us p :hover {
    margin-top: 10%;
    text-align: center;
    color: var(--sunset2);
    font-size: 10px;
}

.footer-contact p {
    text-align: center;
    color: white;
    font-size: 10px;

}

.footer-contact p :hover {
    text-align: center;
    color: var(--sunset2);
    font-size: 10px;
}

.footer-text .ft-logo {
    margin-bottom: 20px;
}

.footer-text .ft-logo a {
    display: inline-block;
}

.footer-text ul {
    text-align: left;

    margin-bottom: 18px;
}

.footer-text ul li {
    list-style: none;
    display: inline-block;
    margin-right: 52px;
}

.footer-text ul li:last-child {
    margin-right: 0;
}

.footer-text ul li a {
    font-size: 16px;
    font-family: 'font-new', sans-serif;
    color: var(--bg-2026-blue);
    font-weight: 600;
    display: inline-block;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.footer-text ul li a:hover {
    color: var(--bg-2026-orange);
}

.footer-text .copyright-text {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 28px;
}

.footer-text .copyright-text i {
    color: #ffffff;
}

.footer-text .copyright-text a {
    color: #ffffff;
}

.footer-text .copyright-text a:hover {
    color: #d0d684;
}

.footer-text .ft-social a {
    /* display: inline-block; */
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: var(--background-dev-2);
    /* border: 1px solid var(--sunset2); */
    border-radius: 50%;
    margin-right: 15px;
}

.footer-text .ft-social a:hover {
    /* display: inline-block; */
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: var(--sunset2);
    /* border: 1px solid white; */
    border-radius: 50%;
    margin-right: 15px;
}

.footer-text .ft-social a:last-child {
    margin-right: 0;
}

.hidden-on-desktop {
    margin-bottom: 7%;
}


/*-------------------------------- Responsive Media Styles --------------------------------*/

@media only screen and (min-width: 1200px) {

    .container-carousel-gallery {
        --w: 24.875rem !important;
        --h: 30.5rem !important;
        margin: 0 auto;
        width: var(--w);
        height: var(--h);
        position: relative;
        perspective: 80.5rem !important;
    }

    .text-description-2026 {
        color: black;
        font-size: 22px !important;
        line-height: 1.5;
        font-weight: 500;
        font-family: 'National Park', sans-serif !important;
        text-align: center;
    }

    .hidden-on-desktop img {
        display: none;
    }

    #profil img {
        margin-top: -10%;
        height: 200px;
    }

    .text-history h6 {
        font-size: 24px;
    }

    .profiles h5 {
        font-size: 24px;
    }

    .profiles i {
        size: 100px;
    }

    .carousel-cell1 {
        margin-right: 10%;
    }

    .product-image img {
        border-radius: 20px;
        box-sizing: border-box;
        height: 400px;
        width: 200px;
        object-fit: cover;
        border: 3px solid #473C79;
    }

    #line-program {
        display: none;
    }

    .accordion-content p {
        font-size: 16px;
    }

    div.btn-selection .selection label {
        font-size: 14px;
        padding: 4px 10px;
    }

    .card-text-news p {
        font-size: 18px;
        font-weight: 600;
        color: white;
        text-align: left;
        letter-spacing: 1px;
        /* margin-top: 120%; */
        position: absolute;
        bottom: 0;
        /* right: 0; */
        right: 5%;
        left: 5%;
    }

    .news-title h5 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .news-title p {
        font-size: 16px;
    }

    .section-title p {
        font-size: 14px;
    }

    #icon-lineup-cibodas {
        display: none;
    }

    #icon-lineup-bogor {
        display: none;
    }

    #icon-lineup-bali {
        display: none;
    }

    div.text-btn1 {
        font-size: 18px;
    }

    div.spotify {
        font-size: 20px;
    }

    #play-list {
        position: absolute;
        top: 20%;
        left: -10%;
        right: 20%;
    }

    .section-title {
        text-align: left;
        margin-top: 3%;
    }

    .section-title h2 {
        font-size: 40px;
        font-weight: bold !important;
        color: #473C79;
        margin-left: 1%;
    }

    .section-title h3 {
        font-size: 28px;
        font-weight: 600;
        color: #473C79;
        margin-left: 1%;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }

    .section-title h5 {
        font-size: 24px;
        font-weight: 500;
        color: #473C79;
        margin-left: 1%;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }

    .section-title p {
        font-size: 18px;
        margin-left: 1%;
        letter-spacing: 1px;
        color: #473C79;
        margin-bottom: 2px;
    }

    .xxx img {
        border: none;
        border-style: none;
        border-radius: 20px;
        padding-right: 15%;
    }

    .counter {
        width: 100px;
    }

    div.text-gallery {
        margin-bottom: 3%;
        font-family: 'National Park', sans-serif;
        font-size: 50px;
        font-weight: 800;
        text-align: center;
        color: white;
    }

    div.text-gallery img {
        height: 25px;

    }

    div.text-gallery p {
        font-size: 25px;
        margin-right: 1%;

    }

    .merx img {
        margin-left: 11%;
    }

    .merch-carousel img {
        margin-left: 100px;
        height: 500px;
    }

    div.card-product-merch {
        font-size: 16px;
        font-weight: 600;
        color: white;
    }


    div.card-product-merch-detail {
        font-size: 20px;
        font-weight: 600;
        color: white;
        /* margin-top: 3%; */
    }

    div.card-product-merch-detail p {
        font-size: 16px;
        font-weight: 400;
        color: white;
    }

    .container {
        max-width: 1579px;
    }

    .card-merchandise {
        margin-top: -5%;
    }

    /* .card-merchandise img {
        height: 400px;
        width: auto;
        object-fit: cover;
    } */

    .home {
        /* margin-top: -13%; */
        height: 100vh;
        position: relative;
    }

    .new-page {
        margin-top: 8%;
    }
}

/* Medium Device: 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .container-carousel-gallery {
        --w: 19.875rem !important;
        --h: 25.5rem !important;
        margin: 0 auto;
        width: var(--w);
        height: var(--h);
        position: relative;
        perspective: 80.5rem !important;
    }

    .hidden-on-desktop img {
        display: none;
    }

    div.spotify {
        font-size: 18px;
    }

    .counter {
        width: 100px;
    }

    div.card-product-merch {
        font-size: 16px;
        font-weight: 600;
        color: var(--bg-v2-pink);
    }

    div.card-product-merch-detail {
        font-size: 20px;
        font-weight: 600;
        color: var(--bg-v2-pink);

    }

    div.card-product-merch-detail p {
        font-size: 16px;
        font-weight: 400;
        color: var(--bg-v2-pink);

    }

    .home {
        /* margin-top: 4%; */
        height: 75vh;
        position: relative;
    }

    .new-page {
        margin-top: 7%;
    }

    .nav-menu .mainmenu {
        display: none;
    }

    .slicknav_menu {
        display: block;
        background: transparent;
        margin-top: 3%;
    }

    .nav-menu .mainmenu ul li {
        margin-right: 25px;
    }

    .hero-section .hero-text {
        padding-top: 110px;
    }

    .counter-section .cd-timer .cd-item {
        margin-left: 25px;
    }

    .ha-text {
        padding-top: 0;
    }

    .member-item {
        width: 25%;
        height: 310px;
    }

    .testimonial-slider.owl-carousel .owl-nav button {
        left: -10px;
    }

    .testimonial-slider.owl-carousel .owl-nav button.owl-next {
        right: -10px;
    }

    .newslatter-inner .ni-form {
        width: 350px;
    }

    .cc-text {
        padding-top: 65px;
    }
}

@media only screen and (max-width: 991px) {

    .product-image img {
        margin-bottom: 5%;
        box-sizing: border-box;
    }

    .togle-size {
        height: 95px;
    }

    div.spotify {
        font-size: 18px;
    }

    .counter {
        width: 100px;
    }

    div.card-product-merch {
        font-size: 14px;
        font-weight: 600;
        color: white;
    }

    div.card-product-merch-detail {
        font-size: 20px;
        font-weight: 600;
        color: white;
    }

    div.card-product-merch-detail p {
        font-size: 16px;
        font-weight: 400;
        color: white;
    }

    .home {
        /* margin-top: -17%; */
        height: 100vh;
        position: relative;
    }

    .new-page {
        margin-top: 14%;
    }

    .nav-menu .mainmenu {
        display: none;
    }

    .slicknav_menu {
        display: block;
        background: transparent;
        margin-top: 3%;
    }

    .schedule-tab .st-content .sc-pic {
        text-align: left;
        padding: 30px 0 0;
    }

    .schedule-tab .st-content .sc-text {
        padding: 30px 0 0;
    }

    .schedule-tab .st-content .sc-widget {
        padding: 30px 0;
    }

    .schedule-tab .st-content {
        padding-left: 30px;
    }

    .price-item.top-rated {
        margin-top: 0;
    }

    .latest-item.large-item {
        height: 550px;
        margin-right: 0;
        margin-left: 0;
    }

    .latest-item {
        margin-left: 0;
    }

    .cs-map {
        margin-top: 20px;
    }

    .about-text {
        margin-top: 30px;
    }

    .story-right {
        padding-left: 0;
    }

    .newslatter-inner .ni-text {
        float: none;
    }

    .newslatter-inner .ni-form {
        float: none;
        margin-top: 30px;
    }

    .testimonial-slider.owl-carousel .owl-nav button {
        left: -10px;
    }

    .testimonial-slider.owl-carousel .owl-nav button.owl-next {
        right: -10px;
    }

    .counter-section .counter-text {
        margin-bottom: 30px;
    }

    .counter-section .cd-timer {
        text-align: left;
    }

    .speaker-item .si-text .si-title {
        padding-top: 30px;
    }

    .bd-text .bd-more-pic img {
        margin-bottom: 10px;
    }

    .cc-text {
        padding-left: 40px;
    }

    .ha-pic {
        margin-right: 0;
    }

    .hero-section .hero-text {
        margin-bottom: 20px;
    }
}

/* Tablet Device: 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-image img {
        margin-bottom: 5%;
        box-sizing: border-box;
    }

    .togle-size {
        height: 105px;
    }

    div.spotify {
        font-size: 18px;
    }

    .nav-menu .mainmenu {
        display: none;
    }

    .new-page {
        margin-top: 14%;
    }

    .slicknav_menu {
        display: block;
        background: transparent;
        margin-top: 3%;
    }

    .nav-menu .primary-btn.top-btn {
        display: none;
    }

    .nav-menu .mainmenu ul li {
        margin-right: 20px;
    }

    .bh-text h2 {
        font-size: 45px;
    }

    .nav-menu .mainmenu ul li:last-child {
        margin-right: 0;
    }

    .hero-section .hero-text {
        margin-bottom: 20px;
    }

    .member-item {
        width: 33.33%;
    }

    .sponsor-element-img1 {
        z-index: -999 !important;
        /* margin-top: -5%; */
        margin-top: -2% !important;
        ;

    }
}

/* Large Mobile: 480px */
/* 767px max */
@media only screen and (max-width: 767px) {
    .new-title-2026 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-family: 'font-new', sans-serif;
        font-weight: bold;
        font-size: 22px !important;
        letter-spacing: 2px;
    }

    .new-title-auth {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-family: 'font-new', sans-serif;
        font-weight: bold;
        font-size: 32px !important;
        letter-spacing: 2px;
    }

    .new-title-gallery {
        align-items: center;
        text-align: center;
        font-family: 'font-new', sans-serif;
        font-weight: bold;
        font-size: 22px !important;
        letter-spacing: 2px;
        text-transform: uppercase;

    }

    .marquee-text {
        animation-duration: 20s;
    }

    .product-image img {
        margin-bottom: 5%;
        box-sizing: border-box;
    }

    .togle-size {
        height: 95px;
    }

    div.spotify {
        font-size: 12px;
    }


    .counter-section .cd-timer .cd-item {
        margin-bottom: 10px;
    }

    .new-page {
        margin-top: 25%;
    }

    .member-item {
        width: 50%;
    }

    .newslatter-inner {
        padding: 60px 50px 48px;
    }

    .newslatter-inner .ni-form {
        width: 350px;
    }

    .footer-text ul li {
        margin-right: 15px;
    }

    .schedule-table-tab .schedule-table-content {
        overflow-x: auto;
    }

    .schedule-table-tab .nav-tabs .nav-item {
        width: 33.33%;
    }

    .bd-text .bd-tag-share .tag {
        float: none;
        margin-top: 0;
        margin-bottom: 25px;
    }

    .bd-text .bd-tag-share .s-share {
        float: none;
    }

    .slicknav_menu {
        display: block;

        background: transparent;
        padding: 0;
    }

    .nav-menu .mainmenu {
        display: none;
    }

    .nav-menu .primary-btn.top-btn {
        display: none;
    }

    .slicknav_btn {
        /* margin: 34px 0; */
        border-radius: 0;
    }

    .slicknav_nav {
        background: #222;
    }

    .slicknav_nav .slicknav_row,
    .slicknav_nav a {
        margin: 0;
        padding: 10px 20px;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    .slicknav_nav ul {
        margin: 0;
    }

    .slicknav_nav a:hover {
        border-radius: 0;
        background: #d0d684;
        color: #ffffff;
    }

    .slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: #d0d684;
        color: #ffffff;
    }

    .member-item .mi-text {
        left: -1000px;
    }

    .bh-text h2,
    .hero-section .hero-text h2 {
        font-size: 40px;
        line-height: normal;
    }

    .counter-section .cd-timer .cd-item {
        margin-right: 10px;
        margin-left: 0;
    }

    .counter-section .cd-timer .cd-item:last-child {
        margin-right: 0;
    }

    .testimonial-slider.owl-carousel {
        text-align: center;
    }

    .testimonial-slider.owl-carousel .owl-nav button {
        margin-top: 10px;
        position: relative;
    }
}

/* Small Mobile: 320px */

@media only screen and (max-width: 479px) {
    .product-image img {
        margin-bottom: 5%;
        box-sizing: border-box;
    }

    .togle-size {
        height: 95px;
    }

    div.spotify {
        font-size: 14px;
    }


    .bh-text h2,
    .hero-section .hero-text h2 {
        font-size: 36px;
        line-height: normal;
    }

    .new-page {
        margin-top: 30%;
    }

    .newslatter-inner {
        padding: 60px 20px 48px;
    }

    .counter-section .cd-timer .cd-item {
        margin-right: 10px;
        margin-left: 0;
    }

    .schedule-tab .nav-tabs .nav-item {
        width: 33.33%;
    }

    .member-item {
        width: 100%;
    }

    .newslatter-inner .ni-form {
        width: 100%;
    }

    .newslatter-inner .ni-form button {
        width: 95px;
    }

    .newslatter-inner .ni-form input {
        padding-right: 100px;
    }

    .footer-text ul li {
        margin-bottom: 10px;
    }

    .schedule-table-tab .nav-tabs .nav-item {
        width: 50%;
    }

    .cc-text {
        padding-left: 30px;
        padding-top: 35px;
    }

    .story-item h2 {
        float: none;
        margin-bottom: 10px;
    }

    .bd-text .bd-tag-share .s-share a {
        font-size: 14px;
        height: 35px;
        width: 35px;
        line-height: 35px;
        margin-left: 5px;
    }
}

/* by it */

.merchandise-image-detail img {
    border-radius: 20px;
    max-height: 500px;
    max-width: 500px;
    object-fit: cover;
    border: 3px solid #473C79;

}


.product-image img {
    border-radius: 20px;
    object-fit: cover;
    box-sizing: border-box;
    border: 3px solid #473C79;

}

.product-image-detail img {
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid #473C79;
    height: 70px;
    width: 70px;
    margin-right: 5px;
    object-fit: cover;
    margin-right: 8px;
}

.product-image-detail.is-selected img {
    border-color: #ff815d;
}

.b-section {
    background-color: #0b9887;
}

.b-section-marquee-box {
    height: 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.b-section-marquee-box p {
    white-space: nowrap;
    text-transform: uppercase;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    /* padding: 0 10px; */
    width: max-content;
    display: flex;
    align-items: center;
    transform: translateX(0);
    animation: b-text-scroll 10s linear infinite;
}

@keyframes b-text-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* .home {
    margin-top: 4%;
    height:100vh;
    position: relative;
} */

video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* iframe {
    add ke gallery
    width: 100%;
    height: 35vh;
} */
.gallery-desktop {
    margin-top: 2%;
    margin-bottom: 2%;
}

.text-gallery {
    margin-bottom: 3%;
    font-family: 'National Park', sans-serif;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    color: white;
}

.text-gallery img {
    height: 10px;
}



.home-content {
    position: relative;
    padding-top: 150px;
    color: #fff;
    text-align: center;
}

.home p {
    font-size: clamp(25px, 4vw, 40px);
    margin-top: 10px;
}

.home-content button {
    display: block;
    font-size: clamp(14px, 1.5vw, 18px);
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    margin: 50px auto 0;
    padding: 12px 20px;
    cursor: pointer;
}

.emot-suni {
    background-color: #171822;
    background: #171822;
}

.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.bottom-right {
    position: absolute;

    bottom: 0;
    right: 0;
}

.top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.top-left {
    position: absolute;

    top: 0;
    left: 0;
}

.text-desk {
    font-family: 'National Park', sans-serif;
    font-size: 14px;
    text-align: center;
    color: var(--bg-v2-purple);
    margin-top: 1%;
}

.text-desk-home {
    font-family: 'National Park', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: var(--bg-v2-purple);
    margin-top: 1%;
}

.limited-paragraph {
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-btn1 {
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 0.5em;
    color: white;
    margin: 3% 1% 1% 1%;
}

.text-btn1:hover {
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 0.5em;
    color: #0b9887;

}

.text-title {
    font-size: 40px;
    font-weight: 700;
    color: #171822;
    margin: 4%;
}

.underline-href {
    text-decoration: underline;
    text-underline-offset: 0.5em;
    color: white;
}

.underline-href :hover {
    text-decoration: underline;
    text-underline-offset: 0.5em;
    color: var(--sunset1);
}

hr.hr1 {
    border: 1px solid #473C79;
}

/* wave header */

/* .wave-bottom {
    --mask:
    radial-gradient(39.96px at 50% calc(100% - 54.15px),#000 99%,#0000 101%) calc(50% - 38px) 0/76px 100%,
    radial-gradient(39.96px at 50% calc(100% + 35.15px),#0000 99%,#000 101%) 50% calc(100% - 19px)/76px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
    z-index: 999;

} */
.wave-bottom {
    --mask:
        radial-gradient(32.69px at 50% calc(100% - 45.60px), #000 99%, #0000 101%) calc(50% - 38px) 0/76px 100%,
        radial-gradient(32.69px at 50% calc(100% + 26.60px), #0000 99%, #000 101%) 50% calc(100% - 19px)/76px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.wave-top {
    --mask: radial-gradient(40.25px at 50% 54px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
        radial-gradient(40.25px at 50% -36px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.wave-bottom-top {
    --mask: radial-gradient(40.25px at 50% 54px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 51% repeat-x,
        radial-gradient(40.25px at 50% -36px, #0000 99%, #000 101%) 50% 18px/72px calc(51% - 18px) repeat-x,
        radial-gradient(40.25px at 50% calc(100% - 54px), #000 99%, #0000 101%) calc(50% - 36px) 100%/72px 51% repeat-x,
        radial-gradient(40.25px at 50% calc(100% + 36px), #0000 99%, #000 101%) 50% calc(100% - 18px) / 72px calc(51% - 18px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.part-off {
    background-color: var(--sunset);
}

.part-off h2 {
    font-size: 24px;
}

.top-topan {
    z-index: 20;
    max-width: 432px;
    position: absolute;
    top: 28px;
    bottom: 0%;
    left: auto;
    right: -3%;
}

.top-topan img {
    vertical-align: middle;
    display: inline-block;
}

/*---------------------
 Sponsor
-----------------------*/

.sponsor-section {
    background: #ffffff;
    padding-top: 30px;
    padding-bottom: 20px;
}

.sponsor-section-bottom {
    background: #ffffff;
    padding-top: 30px;
    padding-bottom: 20px;
}

.sponsor-section h4 {
    color: black;
    padding-bottom: 20px;
}

.sponsor-text p {
    text-align: center;
    padding-top: 20px;
    color: black;
    font-size: 12px;
}

.sponsor-text-bottom p {
    justify-items: center;
    text-align: center;
    color: white;
    font-size: 20px;
}

.sponsor-text-bottom1 p {
    text-align: center;
    color: white;
    font-size: 14px;
}

.sponsor-logo {
    justify-content: center;
}

.text-detail-news {
    color: white;
    font-size: 12px;
    text-align: left;
    margin-left: -2%;
}

.text-detail-news p {
    color: white;
    font-size: 14px;
    text-align: left;
}

.text-detail-news a {
    color: white;
}

.text-detail-news a:hover {
    color: var(--sunset2);
}



.btn-group {
    display: flex;
    /* margin-top: 3%; */
}

.btn-group button {
    font-size: 12px;
    height: 30px;
    margin: 10px;
    background-color: transparent;
    /* Green background */
    border: 1px solid white;
    border-radius: 20px;
    /* Green border */
    color: white;
    /* White text */
    padding: 0px 24px;
    /* Some padding */
    cursor: pointer;
    /* Pointer/hand icon */

    /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
    border-right: none;
    /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;

}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: white;
    color: var(--sunset);

    cursor: pointer;
}

.lineup-link a {
    color: white;
}

.lineup-link a:hover {
    color: var(--sunset2);
}

.btn-prg {
    max-height: 40px;
    margin-top: 3%;
    font-weight: 700;
    font-size: 10px;
    color: white;
    text-align: center;
    background-color: var(--bg-2026-orange);
    padding: 10px 24px;
    border: solid var(--bg-2026-orange) 0px;
    border-radius: 20px;
    transition: 1000ms;
    transform: translateY(0);
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    font-family: 'National Park', sans-serif;
}

.btn-prg:hover {
    transition: 500ms;
    /* padding: 10px 22px; */
    transform: translateY(-0px);
    background-color: var(--sunset2);
    color: white;
    border: solid 0px var(--sunset2);
}

.btn-outline-primary :hover {
    background: rebeccapurple;
}

.form-check-label p {
    font-size: 12px;
    text-align: justify;
}


.text-program {
    /* margin-top: 10%; */
    color: #473C79;
    font-size: 14px;
    text-align: center;
    font-family: 'font-new', sans-serif;
    font-weight: lighter;
    text-align: justify;
}

.video-gallery {
    width: 100%;
    height: 100%;
    position: relative;
}

.text-muted {
    color: #ebebeb !important;
}

option:checked,
option:hover {
    background-color: #E85392;
    color: white;
}

.btn {
    color: white !important;
}

/* label {
    color: white !important;
} */
.form-group label {
    color: white;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1.5px solid #e1e5eb;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    height: auto;
    /* Mengatur tinggi agar padding terasa lega */
}

.form-control:focus {
    background-color: #fff;
    border-color: #FA5B01;
    /* Mengikuti warna brand Anda */
    box-shadow: 0 0 0 0.2rem rgba(250, 91, 1, 0.15);
    color: #495057;
}

/* Style untuk Select agar tidak kaku */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    line-height: normal !important;
    /* Tambahkan background arrow sendiri jika menggunakan ini */
}

/* Modern Checkbox */
.form-check-label p {
    color: white !important;
    /* Mengubah dari putih ke abu gelap agar lebih terbaca */
    font-size: 0.85rem;
    line-height: 1.6;
}



/* Feedback Styling */
.invalid-feedback {
    font-size: 0.8rem;
}

small {
    color: white !important;
}

.tnc-content {
    margin: 5%;
}

.tnc {
    font-size: 14px;
    color: #473C79;
    text-align: justify;
    letter-spacing: 1px;
    font-weight: 500;
}

.tnc-1 {
    font-size: 14px;
    color: var(--bg-v2-pink);
    text-align: justify;
    font-style: italic;
    letter-spacing: 1px;
    font-weight: 500;
}

.btn-1 {
    background-color: var(--bg-v2-pink);
    border-radius: 30px;
    border-style: none;
    color: white !important;
    padding: 8px 16px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 4px 2px;
    cursor: pointer;
    width: 160px;
}

.btn-1:hover {
    background-color: var(--sunset1);
    color: white;
}

.nav-button {
    color: white;
    border: 1px solid white;
    border-radius: 30px;
    padding: 6px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 150px;
}

.nav-button:hover {
    background: white;
    color: #FBBD46;
}

.carousel-indicators li {
    width: 8px;
    height: 8px;
    border-radius: 100%;
}

.carousel-indicators {
    bottom: -30px;
}

.accordion-container {
    width: 100%;
    /* max-width: 600px; */
}

.accordion-item {

    background-color: transparent;
    /* White background for items */
    /* border: 1px solid #E0E0E0; */
    /* Light border */
    /* border-radius: 8px; */
    margin-bottom: 10px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    /* Softer shadow */
}



.icon {
    transition: transform 0.2s ease;
    color: white;
}

.active .icon {
    transform: rotate(180deg);
}

/* Element */
#program-activities-img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -90;
    max-width: 70px;
    margin-top: -30px;
    margin-right: 8%;

}

#discover-lineup-img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -91;
    max-width: 100px;
    margin-top: -45px;
    margin-right: 5%;
}

#buy-ticket-img {
    position: absolute;
    top: 0;
    z-index: 1;
    margin-top: -15px;
    z-index: -92;
    max-width: 150px;
    /* margin-top: -12px; */
    right: 0%;
}

#gallery-event-img {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: -9999;
    max-width: 100px;
    margin-top: -60px;
}

#icon-lineup-cibodas {
    z-index: 20;
    width: 90px;
    margin-bottom: -3%;
    position: absolute;
    top: auto;
    left: 0%;
    right: auto;
}

#icon-lineup-bali {
    z-index: 20;
    width: 90px;
    margin-bottom: -3%;
    position: absolute;
    top: auto;
    right: 0%;
    left: auto;
}

#suni-emot-hii-img {
    z-index: 20;
    position: absolute;
    top: auto;
    right: 0%;
    margin-top: 5%;
    max-width: 70%;
}

#icon-lineup-desk {
    z-index: -20;
    position: absolute;
    top: 0%;
    right: 0%;
    margin-top: -5%;
    max-width: 15%;
}

#icon-ticket-desk {
    z-index: -20;
    position: absolute;
    top: 0%;
    left: 30%;

    max-width: 10%;
}

#icon-news-desk {
    z-index: -20;
    position: absolute;
    bottom: 0%;
    left: 10%;
    max-width: 8%;
}

#icon-news {
    z-index: -20;
    width: 110px;
    position: absolute;
    top: 0%;
    left: auto;
    right: 5%;
}

#icon-music-desk {
    z-index: -20;
    width: 110px;
    position: absolute;
    top: 0%;
    left: 33%;
}

#icon-music {
    z-index: -20;
    width: 15%;
    position: absolute;
    bottom: 10%;
    left: auto;
    right: 15%;
}


#icon-lineup-bogor {
    z-index: 20;
    width: 100px;
    margin-bottom: -3%;
    position: absolute;
    top: auto;
    left: 0%;
    right: auto;
}

/* #suni-emot-img {
    z-index: 20;
    height:  1080px;
} */

#icon-lineup-left {
    z-index: 20;
    width: 120px;
    margin-top: 40%;
    position: absolute;
    top: auto;
    left: 0%;
    right: auto;
}

#icon-music-spotify {
    z-index: 20;
    width: 30px;
    position: absolute;
    top: auto;
    right: 0%;
    left: auto;
    margin-bottom: 10%;
    margin-right: 10%;
}

#icon-lineup-right {
    z-index: 20;
    width: 110px;
    margin-top: 10%;
    position: absolute;
    top: auto;
    left: auto;
    right: 0%;
}

#sponsor-element-img {
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
    width: 90%;
    margin-bottom: -75px;
    margin-top: 30px;
}



#sponsor-element-img-large {
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
    max-width: 700px;
    margin-bottom: -90px;
    margin-top: 50px;
}

#experiance1 {
    z-index: 20;
    width: 90px;
    position: absolute;
    top: auto;
    margin-top: -30%;
    left: auto;
    right: 20%;
}

#experiance2 {
    z-index: 20;
    width: 90px;
    position: absolute;
    top: auto;
    margin-top: -20%;
    left: 0%;
}

#experiance3 {
    z-index: 20;
    width: 90px;
    position: absolute;
    top: auto;
    margin-top: -30%;
    right: 0%;
}

#experiance4 {
    z-index: 20;
    width: 90px;

    position: absolute;
    bottom: auto;
    right: 0%;
    left: auto;
}

#bg-pattern {
    --mask: radial-gradient(40.25px at 50% 54px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
        radial-gradient(40.25px at 50% -36px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: radial-gradient(circle at 25% 25%, #01948025 20%, transparent 21%, transparent 100%), radial-gradient(circle at 75% 75%, #019481 15%, transparent 16%);
    background-size: 1.5em 1.5em;
    background-color: transparent;
    opacity: 1;
    z-index: -88;
}

#bg-pattern-1 {
    --mask: radial-gradient(40.25px at 50% 54px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
        radial-gradient(40.25px at 50% -36px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: radial-gradient(circle at 25% 25%, #153e4a67 20%, transparent 21%, transparent 100%), radial-gradient(circle at 75% 75%, #153E4A 15%, transparent 16%);
    background-size: 1.5em 1.5em;
    background-color: transparent;
    opacity: 1;
    z-index: -88;
}

.bg-patterns {
    --mask: radial-gradient(40.25px at 50% 54px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
        radial-gradient(40.25px at 50% -36px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: radial-gradient(circle at 25% 25%, #01948025 20%, transparent 21%, transparent 100%), radial-gradient(circle at 75% 75%, #019481 15%, transparent 16%);
    background-size: 1.5em 1.5em;
    background-color: transparent;
    opacity: 1;
    z-index: -88;
}

.bg-patterns-1 {
    --mask: radial-gradient(40.25px at 50% 54px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
        radial-gradient(40.25px at 50% -36px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: radial-gradient(circle at 25% 25%, #153e4a67 20%, transparent 21%, transparent 100%), radial-gradient(circle at 75% 75%, #153E4A 15%, transparent 16%);
    background-size: 1.5em 1.5em;
    background-color: transparent;
    opacity: 1;
    z-index: -88;
}

.togle {
    position: absolute;
    right: 0;
    padding-right: 1%;
    cursor: pointer;
    /* opacity: 0; */
    /* visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; */
}





.togle1 {
    right: 0;
    top: 0;
    cursor: pointer;
}

.spotify {
    text-align: center;
    color: white;
    margin-left: 10%;
    margin-right: 10%;
    /* margin-bottom: 10%; */
}

/* iframe {
    display: none;
} */

/* full-screen navbar*/

.nav-container {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 40%;
    left: 0;
    margin: 0 auto;
}

.nav-container p {
    font-size: 20px;
}

.nav-container a {
    display: inline-block;
    position: relative;
    text-align: center;
    color: white;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    top: 5px;
}

.nav-container a:after {
    content: '';
    position: absolute;
    background: transparent;
    height: 2px;
    width: 0%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    bottom: 0;
    -webkit-transition: .35s ease;
    transition: .35s ease;
}

.nav-container a:hover:after,
.nav-container a:focus:after,
.nav-container a:active:after {
    width: 100%;
}

.button_container {
    position: fixed;
    left: -1%;
    cursor: pointer;
    z-index: 100;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
}

.button_container:hover {
    opacity: 1;
}

.button_container.active .top {
    -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
    -ms-transform: translateY(11px) translateX(0) rotate(45deg);
    transform: translateY(11px) translateX(0) rotate(45deg);
    background: #FFF;
}

.button_container.active .middle {
    opacity: 0;
    background: #FFF;
}

.button_container.active .bottom {
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
    -ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
    transform: translateY(-11px) translateX(0) rotate(-45deg);
    background: #FFF;
}

.button_container span {
    background: #292929;
    border: none;
    height: 5px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}

.button_container span:nth-of-type(2) {
    top: 11px;
    width: 60%;
}

.button_container span:nth-of-type(3) {
    top: 22px;
}

.overlay {
    position: fixed;
    background: var(--bg-v2-pink);
    top: 0;
    right: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: auto;

}

.overlay.open {
    position: fixed;
    opacity: 1;
    visibility: visible;
    height: 100%;
    max-width: 45%;
    z-index: 99;
}

.overlay.open li {
    -webkit-animation: fadeInRight .5s ease forwards;
    animation: fadeInRight .5s ease forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
}

.overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: .50s;
    animation-delay: .50s;
}

.overlay.open li:nth-of-type(5) {
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
}


.overlay nav {
    position: relative;
    height: 70%;
    top: 37%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    font-family: 'Caesar Dressing', sans-serif;
    font-weight: bolder;
    text-align: center;
    color: white;
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
}

.overlay ul li {
    display: block;
    /* height: 20%;
    height: calc(100% / 5); */
    min-height: 50px;
    position: relative;
    opacity: 0;
}

.overlay ul li a {
    display: block;
    position: relative;
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
    width: 100%;
}

.overlay ul li a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 3px;
    background: #FFF;
    -webkit-transition: .35s;
    transition: .35s;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.text-dropdown p {
    font-size: 20px;
}

/* Gaya untuk opsi dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}


.box {
    position: relative;
    width: 380px;
    height: 420px;
    background-color: #1c1c1c;
    border-radius: 8px;
    overflow: hidden;
}

.box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
}

.box::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -3s;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.overlay-menu {
    z-index: 999;
    margin-bottom: 10px;
}

.text-desk-program {
    text-align: justify;
    font-size: 12px;
    color: white;
    margin-bottom: 3%;
}

.text-desk-program h5 {
    font-weight: 700;
    color: white;
    margin-bottom: 3%;
    letter-spacing: 1px;
}

.accordion-header {
    font-family: 'font-new', sans-serif;
    background-color: transparent;
    color: white;
    /* White text */
    padding: 15px 15px 15px 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-radius: 8px 8px 0 0; */
    transition: background-color 0.3s ease;
    text-transform: uppercase;
}

.gallery-text-foto {
    font-size: 12px;
    align-items: center;
    text-align: center;
}

.accordion-content {
    font-family: 'font-new', sans-serif;
    font-size: 14px;
    border-bottom: 1px solid white;
    color: white;
    background-color: transparent;
    overflow: hidden;
    padding: 0 5px;
    max-height: 0;
    transition: max-height 0.3s ease;
    text-align: justify;
}

.accordion-content p {
    margin: 15px 0;
    line-height: 1.5;
}

.accordion-content li {
    margin-left: 5px;
    line-height: 1.5;
}

.carousel-inner {
    z-index: 9999;
    border-radius: 10px;
    /* Sudut melengkung */
    border: 5px solid #473C79;
    /* Border dengan warna dan ukuran */
    object-fit: cover;
}

.carousel-inner img {
    height: 357px;
    object-fit: cover;
}

.merx img {
    height: auto;
    object-fit: cover;
}

.img-fluid {
    object-fit: cover;
}

.img-fill {
    object-fit: fill;
}

.img-contain {
    object-fit: contain;
}

.img-cover {
    object-fit: cover;
}

.img-none {
    object-fit: none;
}

.img-scale-down {
    object-fit: scale-down;
}

.viewer-toolbar>ul>li {
    background-color: rgb(255 255 255 / 50%) !important;
}

.viewer-toolbar .viewer-download {
    background-image: url('/img/asset/download.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.merch {
    background: transparent;
}

.merch img {
    border-radius: 20px;
    border-style: none;
}

.merch-carousel {
    width: 100%;
    margin-right: 10px;
    align-items: center;
    background: transparent;
    border-radius: 20px;
    border-style: none;
}

.merch-carousel img {
    border-radius: 20px;
    object-fit: cover;
}

/* cell number */
.merch-carousel:before {
    display: block;
    text-align: center;
    content: '';
    line-height: 200px;
    font-size: 80px;
    color: white;
}

.btn-selection .selection {
    margin-bottom: 1em;
    margin-left: 10px;
}

.btn-selection .selection label {
    font-size: 12px;
    text-align: center;
    align-items: center;
    justify-items: center;
    /* margin: 5px; */
    /* display: flex; */
    background-color: var(--bg-v2-pink);
    border: 1px solid white;
    border-radius: 15px;
    padding: 0.2em .5em;
    font-weight: 600;
    cursor: pointer;
    color: white;
}

.sel label {
    width: 7em;
}

/* .sel-detail label {
    width: 8em;
} */

.btn-selection .selection label:hover {
    background-color: white;
    color: black;
}

.btn-selection .selection input[type=radio] {
    display: none;
}

.btn-selection .selection input[type=radio]:checked~label {
    background-color: white;
    color: black;
}

.btn-selection .selection.disable input[type=radio]:checked~label {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    cursor: default;
}

.btn-merchs {
    border: 0;
    border-style: none;
    border-radius: 10px;
    background-color: var(--sunset2);
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.btn-merchs:hover {
    border: 0;
    border-style: none;
    border-radius: 10px;
    background-color: var(--sunset1);
    color: white;
    font-weight: 700;
}

.btn-merchs1 {
    border: 0;
    border-style: none;
    border-radius: 10px;
    background-color: #473C79;
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.btn-merchs1:hover {
    border: 0;
    border-style: none;
    border-radius: 10px;
    background-color: var(--sunset1);
    color: white;
    font-weight: 700;
}

.counter {
    right: 0;
    position: absolute;
    margin-right: 3%;
    margin-top: 5px;
    border-radius: 20px;
    color: black;
    background-color: white;
    display: flex;
    align-items: center;
    max-height: 30px;
}

.trash {
    right: 0;
    position: absolute;
    margin-right: 5%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    height: 50px;
}

.counter button {
    color: black;
    background-color: white;
}

.trash button {
    margin-top: 15px;
    background: transparent;
}

.value {
    font-size: 14px;
    min-width: 15px;
    text-align: center;
}

.merchandise-image-detail .carousel-indicators {
    margin-bottom: 40px;
}

.news-title a {
    color: #473C79;
}

.news-title a :hover {
    color: var(--sunset2);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.no-border {
    border: 0;
}

.pay-button {
    background: var(--sunset);
    font-size: 16px !important;
}

.pay-button :hover {
    background: var(--sunset2);
}

.list-item {
    border-radius: 10px;
}

.list-item img {
    border-radius: 10px 0 0 0;
}

.ikon :hover {
    fill: var(--sunset2);
    color: var(--sunset2);
    background: var(--sunset2);
}

.badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--sunset2);
    border-radius: 50%;
    color: white;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.btn-open {
    color: white;
    cursor: pointer;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 0.5em;
}

.btn-open :hover {
    color: var(--sunset2);
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 0.5em;
}

.btn-open a:hover {
    color: var(--sunset2);
    letter-spacing: 1px;
    text-decoration: underline;
}

.btn-close {
    background: var(--sunset1);
    color: white;
    width: 100%;
}

dialog {
    border: none;
    border-radius: 0.25rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 400px;
    text-align: center;
}

.icon-gif img {
    height: 70px;
}

.text-content {
    color: var(--sunset1);
    font-family: 'National Park', sans-serif;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.text-desk a {
    color: white;
}

.text-desk a:hover {
    color: var(--sunset2);
}

.float-cart {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--bg-bogor);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    cursor: pointer;
}

.my-float-cart {
    margin-top: 16px;
}

.offcanvas {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99999;
    bottom: 0;
    left: 0;
    background-color: #144351;
    background-color: #144351;
    /* overflow-x: hidden; */
    transition: 0.3s;
    overflow: auto;
}

.offcanvas-content {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.offcanvas a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.offcanvas a:hover,
.offcanvas a:focus {
    color: #f1f1f1;
}

.offcanvas .closebtn {
    position: absolute;
    display: block;
    top: 10px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
    .offcanvas a {
        font-size: 20px
    }

    .offcanvas .closebtn {
        position: fixed;
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

.start {
    justify-items: start;
    text-align: start;
}

.start h6 {
    color: black;
}

.profiles :hover {
    color: var(--sunset2);
}

.profiles a {
    color: white;
}

.help-center img {
    border-radius: 25px;
}

.help-center-container {
    color: white;
    border-radius: 25px;
    height: 120px;
    box-shadow: 5px 5px #e6e6e6;
    background: var(--bg-cibodas);
}

.help-center-container a:hover {
    color: var(--sunset2);
}


/* Dev v-2 */


.text-event {
    font-size: 40px;
    color: #473C79;
    font-family: 'caesar dressing', sans-serif;
}

.text-event h6 {
    font-size: 18px;
    margin-left: 3%;
    margin-right: 3%;
}

.text-event-1 {
    color: #473C79;
    font-size: 110px;
    margin-left: 3px;
    margin-right: 3px;
}

.text-event-2 {
    color: #473C79;
    font-size: 60px;
    margin-left: 3%;
    margin-right: 3%;
}

.text-event-2 {
    height: 100px;
}


.custom-button-pink {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 20%;
    /* Ukuran maksimum tombol */
    height: 40px;
    /* Tinggi tombol */
    border: none;
    border-radius: 50px;
    /* padding: 30px 40px; */
    /* background-color: var(--bg-v2-pink); */
    /* background-image: url('./../img/button/areas-btn-1.svg'); */
    /* Ganti dengan gambar latar belakang */
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    /* Menyesuaikan gambar latar belakang */
    background-position: center;
    /* Memastikan gambar berada di tengah */
    font-family: 'National Park', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-pink {
    /* background-color: var(--bg-v2-pink); */
    /* background-image: url('./../img/button/areas-btn-1-1.svg'); */
    transition-duration: 50ms;
    cursor: pointer;
}


.custom-button-news {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 35%;
    /* Ukuran maksimum tombol */
    height: 40px;
    /* Tinggi tombol */
    border: none;
    border-radius: 50px;
    /* padding: 30px 40px; */
    background-color: var(--bg-2026-orange);
    /* background-image: url('./../img/button/areas-btn-1.svg'); */
    /* Ganti dengan gambar latar belakang */
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    /* Menyesuaikan gambar latar belakang */
    background-position: center;
    /* Memastikan gambar berada di tengah */
    font-family: 'National Park', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-news {
    background-color: var(--bg-2026-orange);
    /* background-image: url('./../img/button/areas-btn-1-1.svg'); */
    transition-duration: 50ms;
    cursor: pointer;
}


.custom-button-green {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.10);
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 20%;
    /* Ukuran maksimum tombol */
    height: 40px;
    /* Tinggi tombol */
    border: none;
    border-radius: 50px;
    /* padding: 30px 40px; */
    background-color: var(--bg-v2-green);
    /* background-image: url('./../img/button/areas-btn-1.svg'); */
    /* Ganti dengan gambar latar belakang */
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    /* Menyesuaikan gambar latar belakang */
    background-position: center;
    /* Memastikan gambar berada di tengah */
    font-family: 'National Park', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-info-green:hover {
    color: white;
    background-color: var(--bg-v2-green);
    /* background-image: url('./../img/button/areas-btn-1-1.svg'); */
    transition-duration: 50ms;
    cursor: pointer;
}

.new-title-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'font-new', sans-serif;
    font-weight: bold;
    font-size: 36px;
    letter-spacing: 2px;
}

.new-title-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'font-new', sans-serif;
    font-weight: bold;
    font-size: 46px;
    letter-spacing: 2px;
}

.new-title-gallery {
    align-items: center;
    text-align: center;
    font-family: 'font-new', sans-serif;
    font-weight: bold;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.new-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'font-new', sans-serif;
}

.new-title img {
    max-width: 100%;
    /* Sesuaikan gambar dengan lebar kontainer */
    height: auto;
    /* Menjaga proporsi gambar */

    /* Tambahkan jarak antara teks dan gambar */
}

.new-title p {
    font-family: 'National Park', sans-serif;
    color: white;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.new-title-program p {
    font-family: 'National Park', sans-serif;
    color: #473C79;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.new-title-program a {
    font-family: 'National Park', sans-serif;
    color: #473C79;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.new-title-program a:hover {
    font-family: 'National Park', sans-serif;
    color: var(--bg-2026-orange);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0;
}


.sponsor-element-img1 {
    z-index: -999;
    /* margin-top: -5%; */
    margin-top: 9%;

}

.sponsor-element-img1 img {
    z-index: -999;
    margin-top: -5%;

}

#sponsor-element-daun {
    z-index: -999;
    margin-bottom: -40%;
}


.wave-title {
    --size: 5px;
    --b: 2px;
    --m: 1;
    --p: calc(var(--m)*var(--size));
    --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);

    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    -webkit-mask:
        radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
        radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g)) 50% calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
    background: #473C79;
    height: 10px;
}

.wave-title-news {
    --size: 5px;
    --b: 2px;
    --m: 1;
    --p: calc(var(--m)*var(--size));
    --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);

    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    -webkit-mask:
        radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
        radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g)) 50% calc(50% + var(--size)/3 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
    background: #473C79;
    height: 10px;
}

.wave-title-gallery {
    --size: 5px;
    --b: 2px;
    --m: 1;
    --p: calc(var(--m)*var(--size));
    --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);

    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    -webkit-mask:
        radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
        radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g)) 50% calc(50% + var(--size)/3 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
    background: white;
    height: 10px;
}

.card-carousel-news-1 {
    border-radius: 20px 20px 20px 20px;
    width: 250px;
    border: none;
    margin-left: 30px;
    margin-right: 30px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-carousel-news-1 img {
    border-radius: 20px 20px 0 0;
    object-fit: cover;
    box-sizing: border-box;

}

.card-carousel-news-2 {
    border-radius: 20px 20px 20px 20px;
    width: 300px;
    border: none;
    object-fit: cover;
    box-sizing: border-box;
}

.card-carousel-news-2 img {
    border-radius: 20px 20px 0 0;
    object-fit: cover;
    box-sizing: border-box;

}

.text-body-news-carousel {
    font-size: 16px;
    font-weight: 500;
}

.title-news-carousel {
    font-size: 14px;
    font-weight: 600;
    color: black;
    margin-bottom: 0;
}

.title-news-carousel p {
    font-size: 12px;
    font-weight: 100;
    color: black;
    margin-bottom: 2px;
}

.title-news-carousel a {
    font-size: 13px;
    font-weight: 200;
    color: black;
}

.title-news-carousel a:hover {
    font-size: 13px;
    font-weight: 200;
    color: #E85392;
}


#toggle {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Durasi transisi */
    opacity: 0;
    /* Default transparan */
    visibility: hidden;
    /* Default tidak terlihat */
}


#btn-buy-ticket {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Durasi transisi */
    opacity: 1;
    /* Default transparan */
    visibility: visible;
    /* Default tidak terlihat */
}

#toggle.open {
    opacity: 1;
    /* Tampilkan elemen */
    visibility: visible;
    /* Tetap terlihat */
}

#btn-buy-ticket.open {
    opacity: 0;
    /* Tampilkan elemen */
    visibility: hidden;
    /* Tetap terlihat */
}

#toggle.active {
    /* Tambahkan styling jika tombol aktif */
}

.toggle-menu i {
    cursor: pointer;
    /* Tambahkan styling untuk ikon menu jika perlu */
}

/* responsive by device */
@media screen and (max-width: 768px) {
    .sponsor-logo-main {
        max-width: 370px !important;
        max-height: 300px;
        object-fit: contain;
    }

    .image-information img {
        height: 100px;
        margin-bottom: 3%;
    }

    .footer-text ul li a {
        font-size: 12px;
        color: var(--bg-2026-blue);
        font-weight: 600;
        display: inline-block;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    .text-event-2 {
        height: 50px;
    }


    .home {
        /* margin-top: -41%; */
        height: 27vh;
        position: relative;
    }

    .button_container {
        position: fixed;
        left: -3%;
        cursor: pointer;
        z-index: 100;
        -webkit-transition: opacity .25s ease;
        transition: opacity .25s ease;
    }

    .hidden-on-desktop {
        margin-bottom: 0%;
    }

    .custom-button-pink {
        max-width: 40%;
    }

    .custom-button-green {
        max-width: 40%;
    }

    .new-title p {
        font-size: 22px;
    }

    div.overlay-fix {
        position: fixed;
        background: var(--bg-2026-orange);
        top: 0;
        left: 0;
        width: 90%;
        height: 0%;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .35s, visibility .35s, height .35s;
        transition: opacity .35s, visibility .35s, height .35s;
        overflow: auto;

    }

    div.overlay-fix.open {
        position: fixed;
        opacity: 1;
        visibility: visible;
        height: 100%;
        max-width: 90%;

        z-index: 99;
    }

    div.overlay {
        position: fixed;
        background: var(--bg-2026-orange);

        top: 0;
        right: 0;
        width: 100%;
        height: 0%;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .35s, visibility .35s, height .35s;
        transition: opacity .35s, visibility .35s, height .35s;
        overflow: auto;

    }

    div.overlay.open {
        position: fixed;
        opacity: 1;
        visibility: visible;
        height: 100%;
        max-width: 80%;
        z-index: 99;
    }

    .text-event {
        font-size: 18px;
    }

    .text-event-1 {
        font-size: 50px;
    }

    .text-event-2 {
        font-size: 30px;

    }

    .text-event h6 {
        font-size: 10px;
        margin-left: 3%;
        margin-right: 3%;
    }

    .text-desk {
        font-size: 12px;
    }


}


.overlay-fix {
    position: fixed;
    background: var(--bg-v2-pink);
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: auto;

}

.overlay-fix.open {
    position: fixed;
    opacity: 1;
    visibility: visible;
    height: 100%;
    max-width: 45%;
    z-index: 999;
}

.overlay-fix.open li {
    -webkit-animation: fadeInRight .5s ease forwards;
    animation: fadeInRight .5s ease forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
}

.overlay-fix.open li:nth-of-type(2) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.overlay-fix.open li:nth-of-type(3) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
}

.overlay-fix.open li:nth-of-type(4) {
    -webkit-animation-delay: .50s;
    animation-delay: .50s;
}

.overlay-fix.open li:nth-of-type(5) {
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
}


.overlay-fix nav {
    position: relative;
    height: 70%;
    top: 37%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    font-family: 'font-new', sans-serif;
    font-weight: bolder;
    text-align: center;
    color: white;
    text-transform: uppercase;
}

.overlay-fix ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
}

.overlay-fix ul li {
    display: block;
    /* height: 20%;
    height: calc(100% / 5); */
    min-height: 50px;
    position: relative;
    opacity: 0;
}

.overlay-fix ul li a {
    display: block;
    position: relative;
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
}

.overlay-fix ul li a:hover:after,
.overlay-fix ul li a:focus:after,
.overlay-fix ul li a:active:after {
    width: 100%;
}

.overlay-fix ul li a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 3px;
    background: #FFF;
    -webkit-transition: .35s;
    transition: .35s;
}



.image-full {
    height: 100%;
    /* Menentukan tinggi kontainer */
    overflow: hidden;
    /* Menyembunyikan gambar yang melampaui batas */
}

.image-full-1 img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
}

.image-full-1 {
    height: 300px;
    /* Menentukan tinggi kontainer */
    overflow: hidden;
    /* Menyembunyikan gambar yang melampaui batas */
}

.image-full img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
}

.sponsor-logo-new {
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
    margin: 10px;
}

.sponsor-logo-main {
    max-width: 550px;
    max-height: 300px;
    object-fit: contain;
}

.sponsor-container {
    display: flex;
    flex-wrap: wrap;
    /* Biar otomatis turun ke bawah */
    gap: 20px;
    /* Jarak antar logo */
    justify-content: center;
    /* Posisi di tengah, bisa diubah sesuai kebutuhan */
    padding: 20px;
}

.rowing {
    max-width: 70px;
}

.sponsor-image {
    margin: 1%;
    height: 40px;
    /* Kontainer responsif */
    /* Atur tinggi kontainer */
    overflow: hidden;
}

.sponsor-image img {
    /* Gambar mengisi lebar kontainer */
    height: 80%;
    width: auto;
    /* Gambar mengisi tinggi kontainer */
    object-fit: cover;
    /* Menjaga aspek rasio dan memotong bagian yang lebih */
}

.main-sponsor img {
    /* Gambar mengisi lebar kontainer */
    height: 100%;
    width: auto;
    /* Gambar mengisi tinggi kontainer */
    object-fit: cover;
    /* Menjaga aspek rasio dan memotong bagian yang lebih */
}

.new-copyright {
    font-family: 'font-new', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #00AEFF;
}



/* Mobile devices (portrait) */
@media (max-width: 480px) {
    .sponsor-logo-main {
        max-width: 370px !important;
        max-height: 300px;
        object-fit: contain;
    }

    .image-information img {
        height: 100px !important;
        margin-bottom: 3%;
    }

    .sponsor-element-img1 {
        z-index: -999 !important;
        /* margin-top: -5%; */
        margin-top: -9% !important;
        ;

    }

}

/* Tablet devices */
@media (min-width: 481px) and (max-width: 768px) {
    .image-information img {
        height: 100px !important;
        margin-bottom: 3%;
    }

    .sponsor-element-img1 {
        z-index: -999 !important;
        /* margin-top: -5%; */
        margin-top: -9% !important;
        ;

    }

}

/* Desktop kecil dan laptop */
@media (min-width: 1024px) {
    div.margin-header {
        margin-top: -10%;
    }

    .sponsor-image {
        margin: 1%;
        height: 100px;
        /* Kontainer responsif */
        /* Atur tinggi kontainer */
        overflow: hidden;
    }

    .sponsor-element-img1 {
        z-index: -999 !important;
        /* margin-top: -5%; */
        margin-top: 4% !important;
        ;

    }
}

/* Desktop menengah */
@media (min-width: 1200px) {
    .sponsor-image {
        margin: 1%;
        height: 100px;
        /* Kontainer responsif */
        /* Atur tinggi kontainer */
        overflow: hidden;
    }

    .sponsor-element-img1 {
        z-index: -999 !important;
        /* margin-top: -5%; */
        margin-top: 4% !important;
        ;

    }
}

/* Desktop besar */
@media (min-width: 1440px) {
    .sponsor-image {
        margin: 1%;
        height: 100px;
        /* Kontainer responsif */
        /* Atur tinggi kontainer */
        overflow: hidden;
    }

    .sponsor-element-img1 {
        z-index: -999 !important;
        /* margin-top: -5%; */
        margin-top: 4% !important;
        ;

    }
}


.text-modal-icon i {
    font-family: 'National Park', sans-serif;
    font-size: 12px;
    color: white
}

.text-modal-icon {
    font-family: 'National Park', sans-serif;
    font-size: 12px;
    color: white
}

.text-modal-icon button {
    font-family: 'National Park', sans-serif;
    font-size: 12px;
    color: white
}

.margin-header {
    margin-top: -25%;
}

.text-help-center h5 {
    font-family: 'National Park', sans-serif !important;
}

.text-help-center a {
    font-family: 'National Park', sans-serif !important;
    color: #F0D704;
}

.font-profile a {
    color: white;
    font-family: 'National Park', sans-serif !important;
}

.font-profile a:hover {
    color: #F0D704;
    font-family: 'National Park', sans-serif !important;
}

.image-information img {
    height: 150px;
    margin-bottom: 3%;
}

/* 2026 */

.text-description-2026 {
    color: black;
    font-size: 14px;
    font-weight: 500;
    font-family: 'National Park', sans-serif !important;
    text-align: center;
}


.custom-button-yellow-2026 {
    /* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.10); */
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 20%;
    /* Ukuran maksimum tombol */
    height: 40px;
    /* Tinggi tombol */
    border: none;
    border-radius: 50px;
    padding: 10px 50px;
    background-color: var(--bg-2026-yellow);
    /* background-image: url('./../img/button/areas-btn-1.svg'); */
    /* Ganti dengan gambar latar belakang */
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    /* Menyesuaikan gambar latar belakang */
    background-position: center;
    /* Memastikan gambar berada di tengah */
    font-family: 'National Park', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;
    font-weight: 800;
    color: black;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-yellow-2026:hover {
    color: black;
    background-color: var(--bg-v2-green);
    /* background-image: url('./../img/button/areas-btn-1-1.svg'); */
    transition-duration: 50ms;
    cursor: pointer;
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    background-color: #FF5700;
    /* Warna oranye sesuai gambar */
    /* Mengatur tinggi baris marquee */
}

.marquee-track {
    display: inline-flex;
    animation: marquee 20s linear infinite;
}

.marquee-track span {
    display: flex;
    align-items: center;
    /* KUNCI: Membuat teks dan bullet sejajar di tengah */
    font-family: 'National Park', sans-serif;
    font-weight: bold;
    color: white;
    font-size: 24px;
    /* Sesuaikan ukuran */
    padding-right: 20px;
    /* Memberi jarak antar pengulangan teks */
}

/* Membuat Bullet sedikit lebih besar jika perlu tanpa miring */
.marquee-track span::before {
    content: '\2022';
    /* Kode unicode untuk bullet */
    margin-right: 20px;
    font-size: 1.5em;
    /* Ukuran bullet sedikit lebih besar agar center-nya pas */
    line-height: 0;
    /* Menghilangkan gangguan line-height font teks */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.title-news-carousel-2026 {
    font-size: 14px;
    font-weight: 600;
    color: black;
    margin-bottom: 0;
    font-family: 'font-new', sans-serif;
}

.title-news-carousel-2026 p {
    font-size: 12px;
    font-weight: 100;
    color: black;
    margin-bottom: 2px;
    font-family: 'font-new', sans-serif;

}

.title-news-carousel-2026 a {
    font-size: 13px;
    font-weight: 700;
    color: black;
    font-family: 'font-new', sans-serif;

}

.title-news-carousel-2026 a:hover {
    font-size: 13px;
    font-weight: 700;
    color: #FA5B01;
}

.container-carousel-gallery {
    --w: 13.875rem;
    --h: 15.5rem;
    margin: 0 auto;
    width: var(--w);
    height: var(--h);
    position: relative;
    perspective: 62.5rem;
}

.carousel-gallery-2026 {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
    user-select: none;
}

.carousel-gallery-2026 .slide {
    transform-style: preserve-3d;
}

.items img {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.625rem;
}

.items {
    display: block;
    position: absolute;
    background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
    width: 100%;
    line-height: var(--h);
    font-size: 2em;
    text-align: center;
    color: #333;
    opacity: 0.8;
    border-radius: 5rem;
    transition: transform 1s, opacity 0.3s;
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.35);
}


.slide .items {
    filter: blur(3px);
    opacity: 0.3;
    transform: scale(0.9);
}

.slide.active .items {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
    z-index: 5;
}

/* 
.slide:nth-child(1) .items {
    background: linear-gradient(to bottom, #e84c3d, #f66d49);
    color: #fff;
    opacity: .93;
}

.slide:nth-child(2) .items {
    background: linear-gradient(to bottom, #417ebf, #0072bc);
    color: #fff;
    opacity: .93;
}

.slide:nth-child(3) .items {
    background: linear-gradient(to bottom, #38c172, #36a165);
    color: #fff;
    opacity: .93;
}

.slide:nth-child(4) .items {
    background: linear-gradient(to bottom, #f0932b, #ed7600);
    color: #fff;
    opacity: .93;
}

.slide:nth-child(5) .items {
    background: linear-gradient(to bottom, #9b59b6, #610093);
    color: #fff;
    opacity: .93;
}

.slide:nth-child(6) .items {
    background: linear-gradient(to bottom, #bf935a, #8c6239);
    color: #fff;
    opacity: .93;
} */

/* Taruh di style tag atau file CSS kamu */
.swal2-actions {
    display: flex !important;
    flex-direction: row !important;
    /* Paksa horizontal */
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.swal2-styled {
    margin: 0 !important;
    width: auto !important;
    /* Mencegah tombol jadi lebar penuh */
    min-width: 100px;
}

.tnc-text-api {
    color: white;
}

.tnc-text-api a {
    color: white;
}

.tnc-text-api a:hover {
    color: var(--bg-2026-orange);
}

.text-announced {
    color: white;
    font-family: 'font-new', sans-serif;
    font-weight: light;
    font-size: 14px;
}

.text-announced p {
    color: white;
    font-family: 'font-new', sans-serif;
    font-weight: light;
    font-size: 14px;
}

.text-announced a {
    color: white;
    font-family: 'font-new', sans-serif;
    font-weight: light;
    font-size: 14px;
}

.text-sponsor p {
    font-family: 'font-new', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #00AEFF;
}