/* Global styles */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Izinkan scroll vertikal saja */
}

/* Splash Section */
.splash-section {
    background: url('../images/Splash_Mobile.png') no-repeat center center/cover;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Logo */
.logo {
    width: 60vh;
    max-width: 90vw;
    height: auto;
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
}

/* USP Section */
.usp-section {
    background: url('../images/USP/USP_BG-01.png') no-repeat center center/cover;
    width: 100%;
    height: 30vw;
    position: relative;
}

/* Pojok Kiri Atas */
.pojok-kiri-atas {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: auto;
}

/* Pojok Kanan Bawah */
.pojok-kanan-bawah {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 17%;
    height: auto;
}

/* Slider Container */
.slider-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87%;
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Slider */
.slider {
	width: 90%;
    display: flex;
    align-items: center;
    overflow-x: auto; /* Izinkan scroll horizontal */
    scroll-behavior: smooth; /* Smooth scrolling */
    gap: 20px; /* Jarak antar gambar */
    padding: 10px;
    height: 100%;
    scroll-snap-type: x mandatory; /* Snap pada axis x */
}

/* Slide */
.slide {
    flex: 0 0 calc((100% - 50px) / 3); /* Responsif untuk 3 item */
    max-width: calc((100% - 50px) / 3);
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background-color: none;
    scroll-snap-align: center; /* Pastikan slide berada di tengah saat snap */
}

/* Tambahkan scrollbar custom */
.slider::-webkit-scrollbar {
    height: 8px;
}

.slider::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

/* Mobile View (Width <= 750px) */
@media screen and (max-width: 81vh) {
    .usp-section {
        width: 100%;
        height: 80vw;
        position: relative;
    }

    .slider-container {
        width: 90%; /* Full width for mobile */
        height: auto; /* Adjust height for mobile */
        overflow: hidden; /* Pastikan tidak ada elemen keluar */
    }

    .slider {
        display: flex;
        gap: 8vh; /* Berikan sedikit ruang antar elemen */
        padding: 20px; /* Sedikit padding */
        height: auto;
        scroll-snap-type: x mandatory; /* Snap behavior */
    }

    .slide {
        flex: 0 0 90%; /* Ambil 90% lebar viewport */
        max-width: 90%; /* Maksimal 90% lebar viewport */
        height: auto; /* Maintain aspect ratio */
        scroll-snap-align: center; /* Pastikan item berada di tengah saat snap */
        margin: 0 auto; /* Tambahkan margin untuk sentralisasi */
        border-radius: 10px; /* Radius sudut (opsional) */
        animation:  duration timing-function delay iteration-count direction fill-mode;
    }

    /* Tambahkan scrollbar custom */
    .slider::-webkit-scrollbar {
        display: none; /* Sembunyikan scrollbar */
    }
}

/* USP Details Section */
.usp-details-section {
    width: 100%;
    height: 44vw;
    position: relative;
}

/* Background Layers */
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Left Panel */
.left-panel {
    position: absolute;
    left: 0.5%; /* Geser panel ke kanan */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Hapus gap agar elemen berdekatan */
    width: 10vw;
    height: 22.2vw;
}

/* Dot-Half */
.dot-half {
    position: relative;
    width: 7vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 14%;
    left: -18%;
}

/* Star */
.star {
    position: absolute; /* Letakkan star di atas dot-half */
    width: 5.2vw;
    height: auto;
    top: 50%; /* Tempatkan di tengah dot-half */
    left: 10%; /* Tempatkan di tengah horizontal */
    transform: translate(-50%, -50%); /* Pastikan benar-benar berada di tengah */
}


/* Buttons */
.button-container {
    position: absolute;
    bottom: 26%;
    right: 12.3%;
    z-index: 3;
    display: flex;
    gap: 1vw;
}

.button {
    cursor: pointer;
}

.play-now {
    width: 15vw;
    height: auto;
}

.watch-trailer {
    width: 16vw;
    height: auto;
}


/* Import Fonts */
@font-face {
    font-family: 'Play Chickens';
    src: url('../fonts/Play-Chickens.otf') format('truetype'); /* Sesuaikan lokasi font */
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); /* Sesuaikan lokasi font */
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.otf') format('opentype'); /* Sesuaikan lokasi font */
}

/* Multi-State Box Styling */
.multi-state-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding-left: 16vw;
}

/* Icon */
/* MSB 1: Gameplay Mode Icon */
.gameplay-mode-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

/* MSB 2: Unique Skills Icon */
.unique-skills-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

/* MSB 3: Unique Characters Icon */
.unique-characters-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

/* MSB 4: Party Pass Icon */
.party-pass-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

/* MSB 5: Leaderboard Icon */
.leaderboard-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

/* MSB 6: Fast Gameplay Icon */
.fast-gameplay-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

/* MSB 7: NFT Asset Icon */
.nft-asset-icon {
	position: absolute;
    width: auto;
    height: 40vw;
    top: 3vw;
    animation: stateIconAnim 1s ease-in-out forwards;
}

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

    20%{
        opacity: 0;
    }

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

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

/* White Circle */
.active-circle {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 50%;
    top: 346px;
    left: 103px;
}

/* Text Content */
.text-content {
    position: absolute;
    top: -2vh;
    right: 5vw;
    padding-top: 11vw;
    padding-right: 1vw;
    width: 54vw;
    animation-name: textContentAnim;
    animation-duration: 1s;
    animation-timing-function:  ease-in-out;
}

@keyframes textContentAnim {
    0%{
        opacity: 0;
        transform: translateY(-20%);
    }

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

/* Title */
.title {
    font-family: 'Play Chickens', sans-serif;
    font-size: 4vw;
    text-transform: uppercase;
    margin: 0;
    padding-top: 0;
	color:white;
}

/* Subtitle */
.sub-title {
    font-family: 'Play Chickens', sans-serif;
    font-size: 2.5vw;
    margin: 0;
    padding-top: 1vw;
	color:white;
}

/* Description */
.description {
    font-family: 'Montserrat', sans-serif;
    font-size: 1vw;
    line-height: 1.5;
    margin: 0;
    padding-top: 1vw;
    max-width: 41vw;
    text-align: justify;
	color: white;
	font-weight: bold;
}

.multi-state-box {
    display: none; /* Semua MSB disembunyikan secara default */
    opacity: 0;    /* Transparan secara default */
    transition: opacity 0.3s ease; /* Efek transisi */
}

.multi-state-box.active {
    display: block; /* Tampilkan MSB yang aktif */
    opacity: 1;     /* MSB yang aktif terlihat penuh */
}

.new-circle {
    position: absolute; /* Wajib absolute */
    width: 1.5vw;
    height: 1.5vw;
    background-color: white;
    border-radius: 50%; /* Membuat lingkaran */
    z-index: 5; /* Pastikan di atas elemen lainnya */
    transition: left 0.3s ease, top 0.3s ease; /* Animasi transisi */
    top: 17.6vw; /* Posisi awal (Unique Characters) */
    left: 5vw; /* Posisi awal (Unique Characters) */
}

.bg-shadow-usp {
	position: absolute;
    width: 100vw;
    height: auto;
    top: 34vw;
	z-index: 6;
}

@keyframes slide {
    0%{
        opacity: 0;
        transform: translateY(-20%);
    }

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

@media screen and (max-width: 81vh) {
    .usp-details-section {
        width: 100%;
        height: 104vw;
        position: relative;
    }

    .bg-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
    }

    .text-content{
        position: absolute;
        top: 63vw;
        right: 0;
        padding-top: 0;
        padding-right: 0;
        width: 100vw;
        height: 70vw;
    }
    .bg-shadow-usp{
        top: 94vw;
    }
    .multi-state-box{
        padding-left: 0;
    }


    /* MSB 1: Gameplay*/
    .gameplay-mode-icon {
        left: 25%;
        transform: translateX(-50%);
        height: 54vw;
        top: 5vw;
    }
    
    /* MSB 2: Unique Skills Icon */
    .unique-skills-icon {
        left: 25%;
        transform: translateX(-50%);
        height: 60vw;
        top: 3vw;
    }
    
    /* MSB 3: Unique Characters Icon */
    .unique-characters-icon {
        left: 20%;
        transform: translateX(-50%);
        height: 75vw;
        top: -3vw;
    }
    
    /* MSB 4: Party Pass Icon */
    .party-pass-icon {
        left: 20%;
        transform: translateX(-50%);
        height: 75vw;
        top: -3vw;
    }
    
    /* MSB 5: Leaderboard Icon */
    .leaderboard-icon {
        left: 20%;
        transform: translateX(-50%);
        height: 75vw;
        top: -3vw;
    }
    
    /* MSB 6: Fast Gameplay Icon */
    .fast-gameplay-icon {
        left: 20%;
        transform: translateX(-50%);
        height: 65vw;
        top: 0vw;
    }
    
    /* MSB 7: NFT Asset Icon */
    .nft-asset-icon {
        left: 20%;
        transform: translateX(-50%);
        height: 70vw;
        top: -3vw;
    }

    

    .button-container{
        bottom: 8%;
        left: 40%;
        transform: translateX(-50%);
    }

    .play-now{
        width: 30vw;
    }

    .watch-trailer{
        width: 30vw;
    }
    .title{
        text-align: center;
        font-size: 6.5vw;
    }

    .sub-title{
        visibility: hidden;
    }

    .description{
        text-align: center;
        margin: 0 auto;
        font-size: 6.5vw;
        max-width: 73vw;
        font-size: 2vw;
        padding-top: 0%;
        bottom: 2%;
        position: relative;
    }

    .left-panel{
        width: 30vw;
        height: 40vw;
    }
    .star{
        width: 10.2vw;
        left: 14%;
    }

    .dot-half{
        width: 16vw;
        top: 7%;
        left: -19%;
    }
    .new-circle{
        width: 3vw;
        height: 3vw;
        top: 42%;
        left: 13%;
    }
}

/* END CSS USP DETAIL */

/* Unique Character Section */
.unique-character-section {
    position: relative;
    width: 100vw;
    height: 65vw;
    margin: 0 auto;
}

/* Background Base */
.bg-base {
    position: absolute;
    width: 100vw;
    height: 65vw;
    top: 0;
    left: 0;
}

/* Title Background */
.title-bg {
    position: absolute;
    width: 100vw;
    height: auto;
    top: 10.7vw;
    left: 0;
}

/* Stats */
.stat-attack {
    position: absolute;
    width: 26.67vw;
    height: 4.32vw; 
    top: 22.92vw;
    left: 73.70vw;
}

.stat-health {
    position: absolute;
    width: 26.67vw;
    height: 4.32vw;
    top: 28.54vw;
    left: 73.70vw;
}

.stat-super {
    position: absolute;
    width: 26.67vw;
    height: 4.53vw;
    top: 34.17vw;
    left: 73.70vw;
}

/* Character Description Background */
.char-detail-bg {
    position: absolute;
    width: 31.20vw;
    height: 15.00vw;
    top: 26.98vw;
    left: 0;
	z-index: 9;
}

/* Character Slide Background */
.char-slide-bg {
    position: absolute;
    width: 100.36vw;
    height: 14.06vw;
    top: 52.50vw;
    left: 0;
	z-index: 10;
}

/* Visit Market Button */
.visit-market-btn {
    position: absolute;
    width: 19.58vw;
    height: 6.82vw;
    top: 56.15vw;
    left: 72.97vw;
	z-index: 13;
}

/* Frames */
.frame {
    position: absolute;
    width: 9.22vw;
    height: 9.11vw;
	z-index: 11;
    top: 55.05vw;
}

.frame-1 {
    left: 11.82vw;
}

.frame-2 {
    left: 23.02vw;
}

.frame-3 {
    left: 34.27vw;
}

.frame-4 {
    left: 45.52vw;
}

.frame-5 {
    left: 56.77vw;
}

/* Icons */
.icon {
    position: absolute;
    width: 7.08vw;
    height: 7.08vw;
	z-index: 12;
    top: 55.94vw;
}

.icon-1 {
    left: 13.02vw;
}

.icon-2 {
    left: 24.22vw;
}

.icon-3 {
    left: 35.42vw;
}

.icon-4 {
    left: 46.67vw;
}

.icon-5 {
    left: 57.86vw;
}

.multi-state-box-char {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100.36vw;
    height: 69.11vw;
}

.multi-state-box-char.active {
    display: block;
}

.char-name {
    position: absolute;
    top: 24.11vw;
    left: 7.81vw;
    width: 29.53vw;
    height: 4.43vw;
    font-size: 4.17vw;
    color: white;
    font-family: 'Play Chickens', sans-serif;
	z-index: 13;
}

.char-role {
    position: absolute;
    top: 29.01vw;
    left: 3.85vw;
    width: 24.48vw;
    height: 2.19vw;
    font-size: 2.08vw;
    color: rgb(255,217,0);
    font-family: 'Play Chickens', sans-serif;
	z-index: 13;
}

.char-desc {
    position: absolute;
    top: 31.72vw;
    left: 3.85vw;
    width: 24.48vw;
    height: 7.29vw;
    font-size: 1.35vw;    
    color: white;
    font-family: 'Play Chickens', sans-serif;
	z-index: 13;
}

.char-image {
    position: absolute;
    width: 56.20vw;
    height: 56.20vw;
    top: 5.73vw;
    left: 21.51vw;   
    transition: transform 0.3s ease-in-out;
    animation: charImageAnim 0.4s ease-in-out;
}

.char-image:hover{
    transform: scale(1.1);
}

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

    100%{
        transform: translateX(0);
    }
}

.char-atk,
.char-health,
.char-skill{
    position: absolute;
    font-size: 2.34vw;
    color: white;
    font-family: 'Play Chickens', sans-serif;
    text-align: right;
    right: 2vw;
}

.char-atk {
    top: 24.38vw;
    width: 10.94vw;
    height: 2.45vw;
}

.char-health {
    top: 30.10vw;
    width: 10.47vw;
    height: 2.45vw;
}

.char-skill {
    top: 36.30vw;
    width: 21.54vw;
    height: 2.45vw;
}

@media screen and (max-width: 81vh){
    .unique-character-section{
        height: 101vw;
    }
    .bg-base{
        height: 101vw;
    }
    .title-bg{
        top: 44.7vw;
    }
    .char-slide-bg{
        top: 87.4vw;
    }
    .frame{
        top: 90vw;
    }
    .icon{
        top:90.9vw;
    }
    .visit-market-btn{
        top: 91.15vw;
    }
    .char-detail-bg{
        left:55%;
        top: 62.5vw;
        transform: scaleX(-1);
        width: 44.5vw;
        height: 22vw;
    }
    .stat-attack{
        width: 39vw;
        height: 6vw;
        top: 26.17vw;
        left: 58.6vw;
    }
    .stat-health{
        width: 39vw;
        height: 6vw;
        top: 34.17vw;
        left: 58.6vw;
    }
    .stat-super{
        width: 39vw;
        height: 6vw;
        top: 42.17vw;
        left: 58.6vw;
    }
    .char-image{
        width: 71.2vw;
        height: 71.2vw;
        top: 11.6vw;
        left: -6vw;
    }
    .char-atk,
    .char-health,
    .char-skill {
        position: absolute;
        font-size: 4.34vw;
        color: white;
        font-family: 'Play Chickens', sans-serif;
        text-align: right;
        right: 4vw;
    }

    .char-atk{
        top: 27.38vw;
        width: 14.94vw;
        height: 2.45vw;
    }
    .char-health{
        top: 35.38vw;
        width: 14.94vw;
        height: 2.45vw;
    }
    .char-skill{
        top: 44.8vw;
        width: 40.54vw;
        height: 2.45vw;
        font-size: 3.3vw;
        text-align: right;
    }
    .char-name{
        position: absolute;
        top: 60.61vw;
        left: 56.81vw;
        width: 40.53vw;
        height: 4.43vw;
        font-size: 5.8vw;
        text-align: center;
    }
    .char-role{
        position: absolute;
        top: 66.4vw;
        left: 56.85vw;
        width: 52.48vw;
        height: 2.19vw;
        font-size: 3.4vw;
    }
    .char-desc{
        position: absolute;
        top: 70.72vw;
        left: 56.85vw;
        width: 37.48vw;
        height: 7.29vw;
        font-size: 2vw;
        color: white;
        font-family: 'Play Chickens', sans-serif;
        z-index: 13;
    }
}

/* END OF UNIQUE CHARACTER Section */

/* BEGINNING OF NFT CHARACTER Section */
/* NFT Progression Section */
.nft-progression-section {
    position: relative;
    width: 100.31vw;
    height: 56.67vw;
    margin: 0 auto;
    overflow: hidden;
    z-index: 1;
}

/* Background Base */
.bg-base-nft {
    position: absolute;
    width: 100.31vw;
    height: 56.88vw;
    top: -0.21vw;
    left: 0;
}

/* Character with Coin */
.char-coin {
    position: absolute;
    width: 100.31vw;
    height: 56.88vw;
    top: 0;
    left: 0;
}

/* Title */
.nft-progress-title {
    position: absolute;
    width: 100.31vw;
    height: 56.46vw;
    top: 0;
    left: 0;
}

/* Sub Title */
.sub-title-nft {
    position: absolute;
    width: 41.49vw;
    height: 3.33vw;
    top: 6.82vw;
    left: 4.53vw;
    font-size: 2.71vw;
    font-family: 'Montserrat bold', sans-serif;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

/* Description */
.nft-description {
    position: absolute;
    width: 41.49vw;
    height: 9.11vw;
    top: 34.00vw;
    left: 4.53vw;
    font-size: 1.51vw;
    font-family: 'Montserrat bold', sans-serif;
    color: white;
    font-weight: bold;
    text-align: justify;
}

/* NFT Icons */
.nft-icon {
    position: absolute;
    width: 7.50vw;
    height: 8.75vw;
    top: 44.17vw;
}

.nft-icon-1 {
    left: 3.59vw;
}

.nft-icon-2 {
    left: 16.09vw;
}

.nft-icon-3 {
    left: 28.65vw;
}

.nft-icon-4 {
    left: 41.02vw;
}

@media screen and (max-width: 81vh){
    .nft-progression-section{
        height: 90.67vw;
    }
    .bg-base-nft{
        height: 91.67vw;
    }
    .char-coin{
        top: auto;
        bottom: 0;
    }
    .nft-progress-title{
        height: auto;
        width: 156vw;
        top:-8vw;
    }
    .sub-title-nft{
        width: 56.49vw;
        height: 10.33vw;
        top: 2.62vw;
        left: 7vw;
        font-size: 5.41vw;
    }
    .nft-description{
        width: 48.49vw;
        height: 9.11vw;
        top: 44vw;
        left: 7vw;
        font-size: 3vw;
        text-align: left;
    }

    .nft-icon {
        width: 9.5vw;
        height: auto;
        top: 75.17vw;
    }
    
    .nft-icon-1 {
        left: 5.59vw;
    }
    
    .nft-icon-2 {
        left: 18.09vw;
    }
    
    .nft-icon-3 {
        left: 30.65vw;
    }
    
    .nft-icon-4 {
        left: 43.02vw;
    }
}

/* End of NFT Char Section */

/* start of Party pass section */
/* Party Pass Section */
.party-pass-section {
    position: relative;
    width: 100.36vw;
    height: 50.83vw;
    background-color: #711793;
    margin: 0 auto;
    overflow: visible;
    z-index: 2;
}

/* Background Color */
.party-pass-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #711793;
}

/* Cover Transisi */
.cover-transisi {
    position: absolute;
    width: 6.25vw;
    height: 3.96vw;
    top: 46.93vw;
    left: -0.10vw;
}

/* Shadow Bawah */
.shadow-bawah { 
    position: absolute;
    opacity: 67%;
    width: 100.89vw;
    height: 10.83vw;
    top: 41.25vw;
    left: -0.63vw;
}

/* Shadow Atas */
.shadow-atas {
    position: absolute;
    width: 100.89vw;
    height: 10.83vw;
    top: -1.51vw;
    left: -0.52vw;
}

/* Background Base Pass */
.bg-base-pass {
    position: absolute;
    width: 100.42vw;
    height: 50.88vw;
    top: 0;
    left: 0;
}

/* Shine */
.shine {
    position: absolute;
    width: 38.07vw;
    height: 38.13vw;
    top: 6.35vw;
    left: 58.59vw;
}

/* Party Title */
.party-title {
    position: absolute;
    width: 35.68vw;
    height: 21.88vw;
    top: 6.35vw;
    left: 5.52vw;
    opacity: 0;
}
.party-title.animate{
    animation: partyTitleAnim 1s ease-in-out;
    animation-fill-mode: forwards;
}

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

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

}

/* Description */
.party-description {
    position: absolute;
    width: 46.35vw;
    height: 7.29vw;
    top: 25.63vw;
    left: 5.52vw;
    font-size: 1.51vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: white;
    text-align: justify;
}

.party-description.animate{
    animation: partyDescAnim 1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes partyDescAnim{
    0%{
        transform: translateX(-50%);
        opacity: 0;
    }

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

}

/* Party Icons */
.party-icon {
    position: absolute;
    width: 7.08vw;
    height: 6.67vw;
    top: 36.09vw;
    opacity: 0;
}

@keyframes partyIconAnim {
    0%{
        transform: translateX(-50%);
        opacity: 0;
    }

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

.party-icon-1 {
    left: 5.68vw;
}

.party-icon-1.animate {
    animation: partyIconAnim 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

.party-icon-2 {
    left: 14.53vw;
}
.party-icon-2.animate {
    animation: partyIconAnim 0.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
}

.party-icon-3 {
    left: 23.39vw;
}
.party-icon-3.animate {
    animation: partyIconAnim 0.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 400ms;
}

.party-icon-4 {
    left: 32.24vw;
}

.party-icon-4.animate {
    animation: partyIconAnim 0.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 600ms;
}

.party-icon-5 {
    left: 41.09vw;
}

.party-icon-5.animate {
    animation: partyIconAnim 0.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 800ms;
}

/* Party Character */
.party-char {
    position: absolute;
    width: 44.48vw;
    height: 50.83vw;
    top: 0;
    left: 53.75vw;
}

/* Party Exp */
.party-exp {
    position: absolute;
    width: 6.82vw;
    height: 6.46vw;
    top: 25.73vw;
    left: 91.25vw;
    opacity: 0;
}

.party-exp.animate{
    animation: partyExpCoinAnim 1s ease-in-out;
    animation-fill-mode: forwards;
}

/* Party Coin */
.party-coin {
    position: absolute;
    width: 4.74vw;
    height: 5.00vw;
    top: 42.71vw;
    left: 88.33vw;
    opacity: 0;
}

.party-coin.animate{
    animation: partyExpCoinAnim 1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes partyExpCoinAnim{
    0%{
        transform: translateX(-20%) translateY(-20%);
        opacity: 0;
    }

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

}

/* Party Star */
.party-star {
    position: absolute;
    width: 5.26vw;
    height: 5.00vw;
    top: 16.67vw;
    left: 56.98vw;
}

.party-star.animate{
    animation: partyStarAnim 1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes partyStarAnim{
    0%{
        transform: translateX(20%) translateY(20%);
        opacity: 0;
    }

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

}


/* End of party pass section*/

/*Start of leaderboard section*/
/* Leaderboard Section */
.leaderboard-section {
    position: relative;
    width: 100.31vw;
    height: 45.63vw;
    margin: 0 auto;
    overflow: visible;
    background-color: #fff; /* Tambahkan warna default jika perlu */
    z-index: 1;
}

/* Background Base */
.bg-base-leader {
    position: absolute;
    width: 100.31vw;
    height: 45.57vw;
    top: 0;
    left: 0;
}

/* Background Frame Bottom */
.bg-frame-bot {
    position: absolute;
    width: 30.18vw;
    height: 2.34vw;
    top: 43.23vw;
    left: 68.73vw;
}

/* Icon Leader */
.icon-leader {
    position: absolute;
    width: 39.06vw;
    height: 36.04vw;
    top: 4.74vw;
    left: 55.52vw;
}

/* Title Leader */
.title-leader {
    position: absolute;
    width: 42.96vw;
    height: 6.51vw;
    top: 11.41vw;
    left: 3.85vw;
}

/* Description Leader */
.desc-leader {
    position: absolute;
    width: 41.49vw;
    height: 6.04vw;
    top: 19.32vw;
    left: 4.53vw;
    font-size: 1.25vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: white;
    text-align: justify;
}

/* Button Leader */
.btn-leader {
    position: absolute;
    width: 18.60vw;
    height: 6.04vw;
    top: 29.81vw;
    left: 4vw;
    cursor: pointer; /* Menambahkan pointer pada tombol */
}

@media screen and (max-width: 81vh) {
    .leaderboard-section{
        height: 89.63vw;
    }
    .bg-base-leader{
        position: absolute;
        width: auto;
        height: 89.63vw;
        top: 0px;
        right: 0px;
        object-fit: cover;
        object-position: right;
    }
    .bg-frame-bot{
        visibility: hidden;
    }

    .icon-leader{
        width: auto;
        height: 44.04vw;
        top: 40.74vw;
        left: 25%;
    }

    .btn-leader{
        width: 29.6vw;
        height: auto;
        top: 29.41vw;
        left: 34vw;
    }
    .title-leader{
        position: absolute;
        width: 47.96vw;
        height: auto;
        top: 4.41vw;
        left: 24.85vw;
    }
    .desc-leader{
        text-align: center;
        margin: 0 auto;
        width: 68vw;
        font-size: 2.4vw;
        padding-top: 0%;
        top: 14%;
        position: relative;
        left: 0vw;
    }
}
/*end of leaderboard section*/


/* faq section css */
/* FAQ Section */
.faq-section {
    position: relative;
    width: 100.31vw;
    height: 54.90vw;
    margin: 0 auto;
    overflow: visible;
    z-index: 1;
}

/* Background FAQ */
.bg-faq {
    position: absolute;
    width: 100.31vw;
    height: 54.90vw;
    top: 0;
    left: 0;
}

/* Character FAQ */
.char-faq {
    position: absolute;
    width: 54.08vw;
    height: 54.90vw;
    top: 0;
    left: 0;
}

/* Title FAQ */
.title-faq {
    position: absolute;
    width: 11.47vw;
    height: 7.08vw;
    top: 6.56vw;
    left: 52.08vw;
}

/* Button Learn More */
.btn-learn-faq {
    position: absolute;
    width: 15.94vw;
    height: 4.48vw;
    top: 39.58vw;
    left: 52.19vw;
    cursor: pointer; /* Agar interaktif jika nanti ditambahkan link */
}

/* Question 1 */
.quest-1 {
    position: absolute;
    width: 14.48vw;
    height: 19.48vw;
    top: -6.51vw;
    left: 88.75vw;
}

/* Question 2 */
.quest-2 {
    position: absolute;
    width: 12.19vw;
    height: 15.94vw;
    top: -4.11vw;
    left: -2.55vw;
}

/* end of faq section css */  


/* Accordion Styling */
/* FAQ Accordion Section */
.faq-accordion {
    max-width: 41.67vw;
    margin: 2.60vw auto;
    font-family: Arial, sans-serif;
    color: #333;
}

.faq-accordion h2 {
    text-align: center;
    margin-bottom: 1.04vw;
    font-size: 1.46vw;
    color: #711793; /* Sesuai warna tema */
}

/* Accordion Container */
.accordion {
    position: absolute; /* Memungkinkan penyesuaian posisi */
    top: 14.58vw; /* Posisi vertikal */
    left: 52.08vw; /* Posisi horizontal */
    overflow: hidden;
}

/* Accordion Item */
.accordion-item {
    border-bottom: 0.05vw solid #ddd;
}

.accordion-item:last-child {
    margin-bottom: 0.52vw;
    border: none; /* Menghapus border */
}

/* Accordion Header */
.accordion-header {
    background: url('images/FAQ/frame_faq.png') no-repeat center center;
    background-color: rgba(211, 211, 211, 0.67);
    color: black;
    padding: 0.78vw;
    width: 44.53vw;
    height: 3.49vw;
    cursor: pointer;
    border-radius: 0.52vw;
    outline: none;
    display: flex; /* Gunakan flexbox untuk pengaturan posisi */
    align-items: flex-start; /* Pastikan teks berada di atas */
    justify-content: flex-start; /* Teks sejajar kiri */
    padding: 0.52vw 1.04vw; /* Padding internal */
    height: auto; /* Hindari height tetap */
}

.accordion-text {
    font-size: 1.67vw;
    font-weight: bold;
    color: white;
    margin-left: 0.52vw; /* Jarak text dari tepi kiri button */
    text-align: left;
    font-family: 'Play Chickens', sans-serif;
    text-shadow:
        -0.10vw -0.10vw 0px #000, /* Outline atas kiri */
        0.10vw -0.10vw 0px #000,  /* Outline atas kanan */
        -0.10vw 0.10vw 0px #000,  /* Outline bawah kiri */
        0.10vw 0.10vw 0px #000;   /* Outline bawah kanan */
}

/* Accordion Content */
.accordion-content {
    max-width: 39.32vw;
    height: auto;
    background: transparent;
    display: none; /* Tersembunyi secara default */
    font-size: 0.99vw;
    text-align: justify;
    color: black;
    font-weight: bold;
    font-family: 'Montserrat ExtraBold', sans-serif;
    margin-left: 1.30vw;
}

@media screen and (max-width: 81vh){
    .faq-section{
        height: 125.9vw;
    }
    .bg-faq{
        position: absolute;
        width: auto;
        height: 125.9vw;
        top: 0;
        left: 0;
    }
    .char-faq{
        visibility: hidden;
    }
    .title-faq{
        position: absolute;
        width: 31.47vw;
        height: auto;
        top: 4.56vw;
        left: 33.08vw;
    }
    .btn-learn-faq{
        position: absolute;
        width: 37.94vw;
        height: auto;
        top: 92.58vw;
        left: 30vw;
        cursor: pointer;
    }
    .accordion{
        position: absolute;
        top: 25.58vw;
        left: 5.08vw;
        overflow: hidden;
    }
    .accordion-header{
        width: 88.2vw;
    }
    .accordion-text{
        font-size: 4.7vw;
        margin-top: 0.52vw;
    }

    .accordion-content{
        max-width: 84.32vw;
        height: auto;
        font-size: 2.6vw;
        margin-left: 1.30vw;
    }
}