:root {
    /* ======== WARNA UTAMA ======== */
    --color-primary-green: #533A63;
    --color-secondary-brown: #B67E6C;
    --color-accent-gold: #F2CDA0;

    /* ======== BACKGROUND & LAYERS ======== */
    --background-main: #FBF5EF;
    --background-secondary: #EBD9CF;

    /* ======== TEKS ======== */
    --text-primary: #3B2D3E;
    --text-secondary: #7C6673;
    --text-accent: var(--color-accent-gold);

    /* ======== BORDER ======== */
    --border-color: #D7BFAE;
    --border-strong: #A69083;

    /* ======== SHAPE & DEKORASI ======== */
    --shape-dark: var(--color-primary-green);
    --shape-light: var(--color-secondary-brown);

    /* ======== TOMBOL ======== */
    --btn-bg: var(--color-secondary-brown);
    --btn-text: #FFFFFF;
    --btn-hover-bg: var(--color-primary-green);
    --btn-hover-text: #FFFFFF;

    /* ======== EFEK KHUSUS ======== */
    --overlay-mist: rgba(242, 205, 160, 0.5);
    --shadow-soft: 0 4px 12px rgba(83, 58, 99, 0.15);

    /* ======== WARNA TAMBAHAN (JIKA DIPERLUKAN) ======== */
    --success-color: #A6C6B8;
    --danger-color: #C27C7C;
    --info-color: #D4B7C3;
}



body {
    font-family: 'Poppins';
}

.btn,
#playPauseBtn {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover,
#playPauseBtn:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-text);
}

.main-background h2 {
    color: var(--btn-text);
}

.main-background h3 {
    color: var(--btn-text);
    font-family: 'Great Vibes';

}


.foto-main {
    width: 220px;
    height: 320px;
}

.foto-main .profil {
    width: 216px;
    height: 290px;
    object-fit: cover;
    object-position: center center;
    border-radius: 30%;
}

.foto-main .border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 300px;
    border: none !important;
}

.main-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -2;
    /* opacity: 0.7; */
}

#frist-layer .the-box {
    border: none !important;
    background-color: transparent !important;
}

#frist-layer .the-box h3 {
    font-family: 'Great Vibes';
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--btn-text);
}

#opening h1 {
    font-family: 'Great Vibes';
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--btn-text);
}

.tree-1 {
    position: absolute;
    top: -20px;
    left: -5px;
    width: 100px;
    z-index: -1;
    transform-origin: center left;
    /* transform: rotate(35deg); */
    animation: tree-1 6s ease-in-out infinite alternate;
    animation-delay: 1s;

}

.tree-2 {
    position: absolute;
    top: 0;
    right: -10px;
    width: 100px;
    z-index: -1;
    transform-origin: center right;
    animation: tree-2 6s ease-in-out infinite alternate;
    /* transform: rotate(-10deg); */
}

@keyframes tree-1 {
    0% {
        transform: rotate(20deg);
    }

    50% {
        transform: rotate(28deg);
    }

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

@keyframes tree-2 {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}



.floral-1,
.floral-2 {
    position: absolute;
    bottom: -30px;
    z-index: 1;
    transform-origin: bottom center;
    animation: sway-floral 6s ease-in-out infinite alternate;
}

.floral-1 {
    right: -95px;
    width: 80px;

}

.floral-2 {
    right: -68px;
    bottom: -18px;
    width: 45px;
    animation-delay: 1s;
}

@keyframes sway-floral {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(18deg);
    }

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


#save-date .countdown .the-box {
    background-color: transparent !important;
    color: var(--btn-text);
}

#save-date .countdown .the-box span {
    font-family: 'Playfair Display';
    font-size: 2rem;
    font-weight: 700;
}

#save-date .foto-main .border {
    width: 400px !important;
}

#save-date .the-date {
    font-family: 'Cinzel';
    font-size: 1rem;
    font-weight: 500;
}

#bride .foto-main .border {
    width: 240px !important;
}

#bride .foto-main .profil {
    width: 170px !important;
    height: 260px !important;
}

#bride .foto-main .floral-1 {
    right: -30px !important;
}

#bride .foto-main .floral-2 {

    right: -15px !important;
}

#bride h3 {
    font-family: 'Courgette';
    font-weight: 500;
}

#the-doa .bg-white {
    background-color: #00000038 !important;
    color: var(--btn-text);
}

#event #Gallerycarousel1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#event #Gallerycarousel1 img {
    object-fit: cover;
    object-position: center center;
}

#event .card {
    background-color: #2e2e2e68;
    border: 2px solid var(--border-color) !important;
    color: var(--btn-text);
}

#mini-maps {
    background-color: var(--background-secondary) !important;
    color: var(--text-secondary);
}

#mini-maps h2 {
    color: var(--text-primary);
}


#love-story h2 {
    color: var(--text-primary);
}


#love-story .timeline-item {
    color: var(--btn-text);
    border: 2px solid var(--color-accent-gold);
    font-weight: 400;
    padding: 15px;
    background-color: #4f4f4f8c !important;
    border-radius: 10px;
}

#love-story h3 {
    color: var(--btn-text);
    font-weight: 500;
    font-size: 24px;
}

#love-story .text-muted {
    color: var(--btn-text) !important;
    font-weight: 500;
    font-size: 14px;
}

/* love-story layer */

#bank .accordion .accordion-item .accordion-button.collapsed {
    background-color: var(--border-color) !important;
    color: var(--btn-text) !important;
}

#bank .accordion .accordion-item .accordion-button {
    background-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    font-family: 'Poppins' !important;
}

#bank h2 {
    color: var(--text-primary);
}

#closing h3 {
    color: var(--btn-text);
    font-family: 'Lora';
}

.butterfly-1{
    position: absolute;
    bottom: 30px;
    right: 60px;
    width: 60px;
    z-index: 1001;
}
.butterfly-2{
    position: absolute;
    bottom: 30px;
    right: 60px;
    width: 50px;
    z-index: 1001;
}