:root {
    --sunsetorange: #ef4600;
    --sunsetorange1: #ff815d;
    --sunsetpink: #ff5046;
    --sunset: #636aaf;
    --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: #0b9887;
}

/* font-family: 'Phudu', sans-serif; */
.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-greenman {
    background-color: #f5e9d4;
}

.bg-greenman1 {
    background-color: #636aaf;
}

.bg-greenman2 {
    background-color: #23304f;
}

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

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

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

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

html,
body {
    height: 100%;
    font-family: "Archivo", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #f5e9d4;
    box-sizing: border-box;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: white;
    font-weight: 400;
    font-family: "Archivo", 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: 20px;
    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 h2 {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-left: 1%;
    /* letter-spacing: 1px; */
}

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

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

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

.news-title {
    color: white;
    margin-left: 1%;
    letter-spacing: 1px;
    color: white;

}


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

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

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

.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: 999999;
    background: #636aaf;

}

/*
.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 {
    width: 100%;
    height: 100%;
    background: url(../img/logo/flower-pulse.gif) center center no-repeat;
    background-size: 100px;

}

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

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

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

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

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

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

.logo a {
    display: inline-block;
}

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

.logos a {
    display: inline-block;
}

.nav-menu {
    float: right;
    color: white;
    font-family: 'Phudu', sans-serif;
}

/* text main */
.nav-menu .mainmenu {
    display: block;
    color: white;
    margin-top: -5px;
    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 {
    color: rgb(255, 252, 192);
}


.nav-menu .mainmenu ul li .dropdown {
    position: absolute;
    width: block;
    background: var(--sunset1);
    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: var(--sunset2);
}

.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: 20px;
    color: #ffffff;
    /* text-transform: uppercase; */
    padding-bottom: 42px;
    position: relative;
    display: inline-block;
    letter-spacing: 2px;
}

/* line text navbar */
.nav-menu .mainmenu ul li a:after {
    position: absolute;
    left: 0;
    bottom: 36px;
    height: 2px;
    width: 100%;
    background: #eaef9b;
    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 {
    text-align: center;
    padding-top: 20px;
}

.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 {
    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: 18px;
    color: #ffffff;
    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(--sunset2);
}

.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(--sunset);
    /* 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;
}


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

@media only screen and (min-width: 1880px) {
    div.inner-wrapper {
        display: flex;
        padding-bottom: 20px;
        /* margin-left: 50px; */
        justify-content: center;
    }

    .row {
        max-width: 1260px;
        width: 100%;
        margin: 0 auto;

    }


}

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

    .inner-wrapper {
        display: flex;
        padding-bottom: 20px;
        /* margin-left: 50px; */
        justify-content: center;
    }

    .card-border-greenman img {
        background-color: transparent;
        margin-left: 20px;
        display: block;
        height: 450px;
        width: 650px;
        object-fit: cover;
        box-sizing: border-box;
    }

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

    #line-program {
        display: none;
    }

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

    div.btn-selection .selection label {
        font-size: 18px;
    }

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



    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: 700;
        color: white;
        margin-left: 1%;
    }

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

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

    .section-title p {
        font-size: 18px;
        margin-left: 1%;
        letter-spacing: 1px;
        color: white;
        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: 'Phudu', 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: 4%;
        height: 120vh;
        position: relative;
    }

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

/* Medium Device: 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    div.spotify {
        font-size: 18px;
    }

    .counter {
        width: 100px;
    }

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

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

    .home {
        margin-top: 4%;
        height: 95vh;
        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: 4%;
        height: 95vh;
        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%;
    }

    div.text-settlers {
        font-size: 28px;
        font-weight: bold;
        color: #181818;
        font-family: 'Phudu', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        padding-left: 5%;
        padding-right: 5%;
    }

    div.text-settlers p {
        font-size: 18px;
        font-weight: bold;
        color: #181818;
        font-family: 'Phudu', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        padding-left: 20%;
        padding-right: 20%;
        padding-top: 5%;
        padding-bottom: 5%;
    }

}

/* Large Mobile: 480px */

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

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

    div.text-settlers {
        font-size: 22px;
        font-weight: bold;
        color: #181818;
        font-family: 'Phudu', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        padding-left: 5%;
        padding-right: 5%;
    }

    div.text-settlers p {
        font-size: 16px;
        font-weight: bold;
        color: #181818;
        font-family: 'Phudu', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
        padding-bottom: 5%;
    }


}

/* 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: 12px;
    }


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


.product-image img {
    border-radius: 20px;
    object-fit: cover;
    box-sizing: border-box;
}


.product-image-detail img {
    box-sizing: border-box;
    /* border-radius: 10px; */
    height: 70px;
    width: 70px;
    margin-right: 5px;
    object-fit: cover;
}

.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: 'Phudu', 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-size: 12px;
    text-align: justify;
    color: var(--sunset);
    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 white;
}

hr.hr2 {
    border: 2px solid #636aaf;
    margin-left: 20%;
    margin-right: 20%;
}

hr.hr3 {
    border: 2px solid #636aaf;
}

hr.hr4 {
    border: 2px solid #0b9887;
    margin-left: 30%;
    margin-right: 30%;
}

/* 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(35.78px at 50% calc(100% - 48px), #000 99%, #0000 101%) calc(50% - 32px) 0/64px 100%,
        radial-gradient(35.78px at 50% calc(100% + 32px), #0000 99%, #000 101%) 50% calc(100% - 16px)/64px 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: 10px;
    text-align: left;
}

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

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

.text-program {
    color: white;
    font-size: 12px;
    text-align: justify;
    /* margin-left: -3%; */
    /* font-weight: 500; */
}


.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 {
    margin-top: 3%;
    font-weight: 500;
    font-size: 10px;
    color: white;
    text-align: center;
    background-color: var(--sunset1);
    /* padding: 10px 24px; */
    border: solid var(--sunset1) 0px;
    border-radius: 5px;
    transition: 1000ms;
    transform: translateY(0);
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    width: 120px;
}

.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: 10px;
    text-align: justify;
}


.text-program {
    margin-top: 10%;
    color: white;
    font-size: 12px;
    text-align: justify;
}

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

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

option:checked,
option:hover {
    background-color: var(--sunset);
    color: white;
}

.btn {
    color: white !important;
}

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

small {
    color: white !important;
}

.tnc-content {
    margin: 5%;
}

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

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

}

.btn-1 {
    background-color: var(--sunsetorange1);
    border-radius: 30px;
    border-style: none;
    color: var(--sunset1);
    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: var(--sunset);
}


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

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

.accordion-container {
    width: 100%;
    background-color: #23304f;
    /* 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: 7%;
    cursor: pointer;
}

.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: 25px;
    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;
    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: #636aaf;
    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.open {
    position: fixed;
    opacity: 1;
    visibility: visible;
    height: 95%;
    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: 'Phudu', 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: black;
    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 {
    background-color: #23304f;
    color: #ffffff;
    /* White text */
    padding: 15px 15px 15px 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    width: 100%;
    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-align: center;
}

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

.accordion-content {
    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 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: transparent;
    border: 1px solid white;
    border-radius: 15px;
    padding: 0.2em;
    font-weight: 600;
    cursor: pointer;
    color: white;
}

.sel label {
    width: 7em;
}

.sel-detail label {
    width: 3em;
}

.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-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: var(--bg-bogor);
    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: white;
}


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

.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: 30px;
    color: white;
    display: inline-block;
    font-size: 16px;
    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: 'Phudu', 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);
}

.text-footer a {
    font-size: 16px;
    color: #23304f;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: start;

}

.text-footer {
    font-size: 16px;
    color: #23304f;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: start;
}

.text-center h6 {
    text-align: center;
    font-size: 16px;
    color: #23304f;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

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

.round-field {
    border-radius: 15px;
}


.font-mobile-footer a {
    font-size: 20px;
    font-weight: bold;
    color: #23304f;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.font-mobile-footer a:hover {
    font-size: 20px;
    color: #636aaf;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.text-greenman {
    text-transform: uppercase;
    font-size: 72px;
    font-weight: 400;
    color: #636aaf;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 3px;
    text-align: center;
}

.text-greenman1 {
    font-size: 28px;
    font-weight: bold;
    color: #636aaf;
    /* font-family: 'Phudu', sans-serif; */
    letter-spacing: 2px;
    text-align: center;
}

.text-greenman2 {
    font-size: 28px;
    font-weight: bold;
    color: black;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}

.text-greenman2 p {
    font-size: 18px;
    font-weight: bold;
    color: black;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}

.text-greenman3 {
    font-size: 50px;
    font-weight: bold;
    color: #636aaf;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: left;
    transform: rotate(-5deg);

}

.text-greenman4 {
    font-size: 32px;
    font-weight: bold;
    color: #636aaf;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: right;
    transform: rotate(2deg);
}

.text-greenman5 {
    font-size: 24px;
    font-weight: bold;
    color: white;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}

.text-greenman5:hover {
    font-size: 24px;
    font-weight: bold;
    color: rgb(246, 253, 155);
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}


.text-greenman6 {
    font-size: 24px;
    font-weight: bold;
    color: #636aaf;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}

.text-greenman6 p {
    font-size: 18px;
    font-weight: bold;
    color: black;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}

.text-greenman7 {
    padding: 5%;
    font-size: 18px;
    font-weight: bold;
    color: black;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: left;
}


.custom-button {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 400px;
    /* Ukuran maksimum tombol */
    height: 60px;
    /* Tinggi tombol */
    border: none;
    padding: 30px 40px;
    background-color: transparent;
    background-image: url('./../img/logo/btn.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: 'Phudu', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button:hover {
    background-image: url('./../img/logo/button.svg');
    transition-duration: 50ms;
    cursor: pointer;
}

/* Responsif: Tombol menyesuaikan ukuran layar */
@media (max-width: 600px) {
    .custom-button {
        height: 50px;
        /* Menurunkan tinggi tombol pada layar kecil */
        font-size: 16px;
        /* Mengurangi ukuran font pada layar kecil */
    }
}



.custom-button-gallery {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 250px;
    /* Ukuran maksimum tombol */
    height: 60px;
    /* Tinggi tombol */
    border: none;
    padding: 30px 40px;
    background-color: transparent;
    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: 'Phudu', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-gallery:hover {
    background-image: url('./../img/button/areas-btn-1-1.svg');
    transition-duration: 50ms;
    cursor: pointer;
}

/* Responsif: Tombol menyesuaikan ukuran layar */
@media (max-width: 600px) {
    .custom-button-gallery {
        height: 50px;
        /* Menurunkan tinggi tombol pada layar kecil */
        font-size: 16px;
        /* Mengurangi ukuran font pada layar kecil */
    }
}



.custom-button-info {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 1100%;
    /* Ukuran maksimum tombol */
    height: 70px;
    /* Tinggi tombol */
    border: none;
    border-radius: 50px;
    /* padding: 30px 40px; */
    background-color: transparent;
    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: 'Phudu', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

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

/* Responsif: Tombol menyesuaikan ukuran layar */
@media (max-width: 600px) {
    .custom-button-info {
        height: 60px;
        /* Menurunkan tinggi tombol pada layar kecil */
        font-size: 16px;
        /* Mengurangi ukuran font pada layar kecil */
    }
}

.outer-wrapper {
    background-color: #23304f;
    max-width: 100vw;
    overflow-x: scroll;
    position: relative;
    scrollbar-color: #23304f #fce29d;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

.pseduo-track {
    background-color: #23304f;
    height: 2px;
    width: 100%;
    position: relative;
    top: -3px;
    z-index: -10;
}

@media (any-hover: none) {
    .pseduo-track {
        display: none;
    }
}

.outer-wrapper::-webkit-scrollbar {
    height: 5px;
}

.outer-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

.outer-wrapper::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: #23304f;
}

.outer-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #f1db9d;
}

.outer-wrapper::-webkit-scrollbar:vertical {
    display: none;
}

.inner-wrapper {
    display: flex;
    padding-bottom: 20px;
    /* margin-left: 50px; */
    justify-content: start;
}

.pseudo-item {
    font-family: 'Phudu', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    margin-left: 50px;
    flex-shrink: 0;
    color: white;
    background-color: transparent;
    cursor: pointer;
}

.pseudo-item:hover {
    font-family: 'Phudu', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    margin-left: 50px;
    flex-shrink: 0;
    color: rgb(255, 252, 192);
    background-color: transparent;
    cursor: pointer;

}

.pseudo-item a {
    color: white;
}

.pseudo-item a:hover {
    color: rgb(255, 245, 170);
}

.margin-top {
    margin-top: 15%;
}

.margin-top-1 {
    margin-top: 28%;
}

.margin-top-2 {
    margin-top: 11%;
}

.margin-top-3 {
    padding: 5%;
    margin-top: 14%;
}

.margin-top-4 {
    margin-top: 8%;
}

.margin-top-5 {
    margin-top: 14%;
}

.margin-top-6 {
    margin-top: 17%;
}

#icon-greenman1 {
    z-index: 1;
    width: 200px;
    margin-top: 20%;
    position: absolute;
    top: 8%;
    left: 10%;
    right: auto;
}

#icon-greenman2 {
    z-index: 1;
    width: 110px;
    margin-top: 36%;
    position: absolute;
    top: 8%;
    left: 13%;
    right: auto;
}

#icon-greenman3 {
    z-index: 1;
    width: 220px;
    margin-top: 45%;
    position: absolute;
    top: 5%;
    left: 8%;
    right: auto;
}

#icon-greenman4 {
    z-index: 1;
    width: 220px;
    margin-top: 20%;
    position: absolute;
    top: 8%;
    right: 6%;
    left: auto;
}

#icon-greenman5 {
    z-index: 1;
    width: 220px;
    margin-top: 22%;
    position: absolute;
    top: 20%;
    right: 8%;
    left: auto;
}

#icon-greenman6 {
    z-index: 1;
    width: 120px;
    margin-top: 30%;
    position: absolute;
    top: 25%;
    right: 12%;
    left: auto;
}

#icon-greenman7 {
    z-index: 1;
    width: 150px;
    margin-top: 30%;
    position: absolute;
    top: 38%;
    right: 12%;
    left: auto;
}

#button-home {
    z-index: 1;
    margin-top: 48%;
    position: absolute;
    right: 50%;
    left: 33%;
}


#icon-greenman8 {
    z-index: 1;
    width: 200px;
    margin-top: 7%;
    position: absolute;
    top: 8%;
    left: 22%;
    right: auto;
}

#icon-greenman9 {
    z-index: 1;
    width: 150px;
    margin-top: 22%;
    position: absolute;
    top: 8%;
    left: 18%;
    right: auto;
}

#icon-greenman10 {
    z-index: 1;
    width: 300px;
    margin-top: 10%;
    position: absolute;
    top: 8%;
    right: 10%;
    left: auto;
}

#icon-greenman11 {
    z-index: 1;
    width: 200px;
    margin-top: 30%;
    position: absolute;
    top: 20%;
    right: 18%;
    left: auto;
}

#icon-greenman12 {
    z-index: 1;
    width: 100px;
    margin-top: 41%;
    position: absolute;
    top: 20%;
    right: 50%;
    left: auto;
}

#icon-greenman13 {
    z-index: 1;
    width: 150px;
    margin-top: 50%;
    position: absolute;
    top: 20%;
    right: 18%;
    left: auto;
}

#icon-greenman14 {
    z-index: 1;
    width: 280px;
    margin-top: 50%;
    position: absolute;
    top: 5%;
    left: 10%;
    right: auto;
}

#icon-button-mountain {
    z-index: 1;
    width: 200px;
    margin-top: 12%;
    position: absolute;
    top: 8%;
    left: 10%;
    right: auto;
}

#icon-button-walled {
    z-index: 1;
    width: 350px;
    margin-top: 15%;
    position: absolute;
    top: 8%;
    left: 35%;
    right: auto;
}

#icon-button-far {
    z-index: 1;
    width: 350px;
    margin-top: 13%;
    position: absolute;
    top: 8%;
    right: auto;
    left: 60%;
}


#icon-button-nature {
    z-index: 1;
    width: 350px;
    margin-top: 25%;
    position: absolute;
    top: 8%;
    right: auto;
    left: 55%;
}

#icon-button-einstein {
    z-index: 1;
    width: 350px;
    margin-top: 30%;
    position: absolute;
    top: 8%;
    right: auto;
    left: 70%;
}


#icon-button-fortune {
    z-index: 1;
    width: 200px;
    margin-top: 30%;
    position: absolute;
    top: 8%;
    left: 10%;
    right: auto;
}

#icon-button-little {
    z-index: 1;
    width: 200px;
    margin-top: 40%;
    position: absolute;
    top: 8%;
    left: 20%;
    right: auto;
}

#icon-button-somewhere {
    z-index: 1;
    width: 200px;
    margin-top: 43%;
    position: absolute;
    top: 20%;
    right: 18%;
    left: auto;
}

#icon-button-settlement {
    z-index: 1;
    width: 200px;
    margin-top: 44%;
    position: absolute;
    top: 20%;
    right: 35%;
    left: auto;
}

#icon-button-courtain {
    z-index: 1;
    width: 200px;
    margin-top: 53%;
    position: absolute;
    top: 20%;
    right: 33%;
    left: auto;
}

#icon-button-babbling {
    z-index: 1;
    width: 200px;
    margin-top: 45%;
    position: absolute;
    top: 20%;
    left: 28%;
    right: auto;
}


/* media custom */

@media only screen and (max-width: 667px) {
    .margin-top-2 {
        margin-top: 20%;
    }

    div.text-greenman {
        text-transform: uppercase;
        font-size: 42px;
        font-weight: 400;
        color: #636aaf;
        font-family: 'Phudu', sans-serif;
        letter-spacing: 3px;
        text-align: center;
    }

    div.input-group {
        padding-left: 20%;
        padding-right: 20%;
    }

    div.areas {
        margin-top: 5%;
    }

    .text-greenman7 {
        font-size: 14px;
        font-weight: bold;
        color: black;
        font-family: 'Phudu', sans-serif;
        letter-spacing: 2px;
        text-align: left;
    }

    .bg-settlers {
        background-color: rgb(232, 178, 226);
        margin-top: -15%;
    }


    #icon-greenman1 {
        z-index: 1;
        width: 200px;
        margin-top: 20%;
        position: absolute;
        top: 8%;
        left: 10%;
        right: auto;
    }

    #icon-greenman2 {
        z-index: 1;
        width: 140px;
        margin-top: 50%;
        position: absolute;
        top: 8%;
        left: 13%;
        right: auto;
    }

    #icon-greenman3 {
        z-index: 1;
        width: 250px;
        margin-top: 120%;
        position: absolute;
        top: 5%;
        left: 3%;
        right: auto;
    }

    #icon-greenman4 {
        display: none;
    }

    #icon-greenman5 {
        z-index: 1;
        width: 220px;
        margin-top: 50%;
        position: absolute;
        top: 20%;
        right: 8%;
        left: auto;
    }

    #icon-greenman6 {
        z-index: 1;
        width: 120px;
        margin-top: 90%;
        position: absolute;
        top: 25%;
        right: 12%;
        left: auto;
    }

    #icon-greenman7 {
        z-index: 1;
        width: 150px;
        margin-top: 90%;
        position: absolute;
        top: 38%;
        right: 0%;
        left: auto;
    }


    #button-home {
        z-index: 1;
        margin-top: 120%;
        position: absolute;
        right: 40%;
        left: 10%;

    }



}



.custom-button-cloud {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 450px;
    /* Ukuran maksimum tombol */
    height: 150px;
    /* Tinggi tombol */
    border: none;
    padding: 40px 50px;
    background-color: transparent;
    background-image: url('./../img/logo/btn-cloud1.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: 'Phudu', sans-serif;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-cloud:hover {
    background-image: url('./../img/logo/btn-cloud2.svg');
    color: #eff696;
    transition-duration: 50ms;
    cursor: pointer;
}

/* Responsif: Tombol menyesuaikan ukuran layar */
@media (max-width: 600px) {
    .custom-button-cloud {
        height: 120px;
        /* Menurunkan tinggi tombol pada layar kecil */
        font-size: 34px;
        /* Mengurangi ukuran font pada layar kecil */
    }
}






.custom-button-cloud-home {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    /* Vertikal centering */
    justify-content: center;
    /* Horizontal centering */
    width: 100%;
    /* Tombol responsif */
    max-width: 450px;
    /* Ukuran maksimum tombol */
    height: 150px;
    /* Tinggi tombol */
    border: none;
    padding: 40px 50px;
    background-color: transparent;
    background-image: url('./../img/logo/btn-cloud1.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: 'Phudu', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition-duration: 50ms;

    /* Mencegah gambar keluar dari tombol */
}

.custom-button-cloud-home:hover {
    background-image: url('./../img/logo/btn-cloud2.svg');
    color: #eff696;
    transition-duration: 50ms;
    cursor: pointer;
}

/* Responsif: Tombol menyesuaikan ukuran layar */
@media (max-width: 600px) {
    .custom-button-cloud-home {
        justify-content: center;
        justify-items: center;
        height: 120px;
        width: 80%;

        /* Menurunkan tinggi tombol pada layar kecil */
        font-size: 24px;
        /* Mengurangi ukuran font pada layar kecil */
    }


}


.logis i {
    height: 40px;
    color: #0b9887;
    margin: 10px;
    padding: 10px;
}

.logis i:hover {
    color: black;
}


.bg-settlers {
    background-color: rgb(232, 178, 226);
}

.bg-areas {
    background-color: #c5e1c7
}

.text-settlers {
    font-size: 52px;
    font-weight: bold;
    color: #181818;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}

.text-settlers p {
    font-size: 24px;
    font-weight: bold;
    color: #181818;
    font-family: 'Phudu', sans-serif;
    letter-spacing: 2px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 5%;
    padding-bottom: 5%;
}


.nearby {
    height: 50px;
    background: #03316e;
    margin: 5%;
    cursor: pointer;
}

.nearby p {
    color: var(--sunset3);
    font-size: 24px;
    padding-top: 4px;
    text-align: left;

}

.underlien-style {
    text-decoration: underline #019481;
    text-underline-offset: 10px;
}

.areas {
    margin-top: -8%;
}


.bg-walled {
    background-color: #f8c1c2;
}

.bg-far-out {
    background-color: #141624;
}

.bg-fortune-falls {
    background-color: #ffeead;
}

.bg-natura-nurture {
    background-color: #87c69f;
}

.bg-little-folk {
    background-color: #fac193;
}

.bg-somewhere {
    background-color: #b8dfde;
}

.lineup-p-bottom {
    margin-bottom: 20%;
}



.input-group {
    padding-left: 10%;
    padding-right: 10%;
}