@font-face {
    font-family: 'Angelos';
    src: url('../hugh-is-life-personal-use.italic.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Great Vibes';
    src: url('../GreatVibes.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vidaloka';
    src: url('../Vidaloka.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pinyon';
    src: url('../PinyonScript.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Belleza';
    src: url('../Belleza.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair';
    src: url('../PlayfairDisplay.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


:root {
    /* Primary colors */
    --primary-color: #d7bddd;       
    --primary-light: #e5d3e9;      
    --primary-soft: #ecd5e7;
    --primary-light-soft: #ece6ee;
  
    /* Accent colors */
    --accent-gold: #D4AF37;         /* Gold klasik */
    --accent-champagne: #EED6C4;    /* Champagne lembut */
  
    /* Background colors */
    --bg-main: #ece6ee;             /* Putih krem (hangat) */
    --bg-dark: #000000;
    --bg-light: #e0d7e3;            /* Warna sangat lembut */
    --bg-secondary-dark:#a09da2;
  
    /* Text colors */
    --text-dark: #2E2E2E;           /* Abu gelap untuk teks utama */
    --text-soft: #4A4A4A;           /* Abu netral untuk teks ringan */
    --text-main: #FFFFFF;
    --text-secondary: #3B3B3B;

    --btn-primary:#9685aa;
  
    /* Border or subtle detail */
    --border-color: #E0D3E5;        /* Warna soft untuk garis pemisah */

    --font-vibes: 'Great Vibes';
    --font-angelos: 'Angelos';
    --font-vidaloka: 'Vidaloka';
    --font-pinyon: 'Pinyon';
    --font-belleza: 'Belleza';
    --font-playfair: 'Playfair';
}

.fs-1{
    font-size: 2rem !important;
}

.fs-6{
    font-size: .75rem !important;
}

.fs-9{
    font-size: 9px !important;
}

.font-vibes{
    font-family: var(--font-vibes) !important;
}
.font-angelos{
    font-family: var(--font-angelos) !important;
}

.font-vidaloka{
    font-family: var(--font-vidaloka) !important;
}

.font-pinyon{
    font-family: var(--font-pinyon) !important;
}

.font-belleza{
    font-family: var(--font-belleza) !important;
}

.font-playfair{
    font-family: var(--font-playfair) !important;
}

.text-dark{
    color:var(--text-dark);
}

.opacity{
    opacity: .7;
}

.container-fluid {
    height: 100vh;
    display: flex;
    overflow: hidden;
    padding:0;
    margin:0;
}
.fixed-image {
    background-image: linear-gradient(to bottom, rgba(215, 189, 221, 0.15), rgba(236, 213, 231, 0.2)), url('../../media/cover.JPG');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 65%;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: flex-end; /* Agar teks ada di bawah */
    justify-content: center;
    padding-bottom: 20px; /* Jarak dari bawah */
    z-index: 999;
}
.bridegroom-names {
    color: var(--text-dark);
    padding: 10px 20px;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: bold;
}
.scroll-content {
    width: 35%;
    margin-left: auto;
    height: 100vh;
    overflow-y: auto;
    background: var(--text-main);
    padding: 0;
}
.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    text-align: center;
    border-bottom: 5px solid var(--border-color);
    overflow: hidden;
}
.inactive{
    display: none !important;
}
.section-content{
    height: 100vh;
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    text-align: center;
    overflow: hidden;
}
.section.visible {
    opacity: 1;
    transform: translateY(0);
}
.section:nth-child(3) {
    color: var(--text-main);
    background-image: url('../../media/2.JPG');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section:nth-child(6) {
    background-color: var(--primary-light-soft); color: var(--text-dark)
}
.section:nth-child(7) {
    background-color: var(--primary-light); color: var(--text-dark)
}
.section:nth-child(8) {
    background-color: var(--primary-light); color: var(--text-dark)
}
.section:nth-child(9) {
    background-color: var(--primary-light); color: var(--text-dark)
}

.section-invite,
.section:nth-child(6),
.section:nth-child(7),
.section:nth-child(8),
.section:nth-child(9){
    background-image: url('../../media/texture2.png');
    background-repeat: repeat;
    background-size: cover;
}

/* .section:nth-child(7) { background-color: var(--bg-light); color: var(--text-dark) }
.section:nth-child(8) { background-color: var(--bg-main); color: var(--text-dark) }
.section:nth-child(9) { background-color: var(--bg-main); color: var(--text-dark) } */
.section.landing{
    justify-content: space-between;
    padding-bottom: 100px;
}
.btn {
    background-color: var(--btn-primary) !important;
}
.align-items-normal{
    align-items: normal !important;
}
.landing {
    position: fixed;
    width: 35%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    z-index: 999;
    transition: transform .3s ease-in-out;
    background-image: linear-gradient(to bottom, rgba(215, 189, 221, 0.15), rgba(236, 213, 231, 0.2)), url('../../media/1.JPG');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section.ending{
    height: 30vh;
}

.section.section-hadiah{
    height: 74vh;
    border-bottom: hidden;
}

.section-content.hadiah,
.section-content.section-ucapan{
    justify-content: start;
}

.section-ucapan{
    overflow: visible;
}

.section-content .atm-card{
    height: 450px;
}

.landing-content {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-between;
}
.landing-content div.bottom{
    display: flex;
    justify-content: center;
}

.scroll-content.locked {
    overflow: hidden;
}

.music-control {
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    width: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.music-control:hover {
    background: rgba(255, 255, 255, 1);
}
.event-details {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.event-details h2 {
    margin-bottom: 10px;
}
.event-details p {
    font-size: 1.2rem;
}
.event-details h2,
.event-details p,
.event-details .row
{
    color: var(--text-dark);
}

.countdown-container {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
}
.countdown-box {
    display: block;
    font-size: clamp(1rem, 5vw, 1.5rem);
    font-weight: bold;
    color: var(--text-dark);
    padding: 10px;
    border-radius: 8px;
    margin: 5px;
}

/* form ucapan */
#comments{
    overflow: hidden;
    overflow-y: auto;
    min-height: 240px;
    max-height: 240px;
    width: 100vw;
}


/* hadiah */
.section-content.hadiah .card{
    max-width: 380px;
}
.section-content.hadiah .card.bca{
    background-color: #329FCE;
}
.section-content.hadiah .card.seabank{
}

.num-rek{
    font-family: "Nunito Sans", Sans-serif;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 1px;
}

.bi-copy{
    cursor: pointer;
}

.bg-elem{
    background-image: url(https://acarakami.com/wp-content/uploads/2019/10/pattern-payment-1.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 60% auto;
    opacity: .85;
}

.bg-master-card{
    background-image: url('../../media/master-card.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 25% auto;
}

/* footer */
.footer {
    padding: 20px;
    background: var(--btn-primary);
    font-size: 0.9rem;
    color: var(--text-main);
    bottom: 0;
}
.footer p{
    color: var(--text-main);
    margin:0
}
.img-fluid{
    max-width: 80%;
    border-radius: 12px;
}

.rounded{
    border-radius: 12px !important;
}

.section .section-overlay{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding:20px;
    background: linear-gradient(to bottom, rgba(215, 189, 221, 0.5), rgba(236, 213, 231, 0.1));
}
.section.section-overlay p{
    color: var(--text-main);
}
.section.first-section{
    position:relative;
    z-index:1;
}

.section-mempelai {
    position: relative;
    color: var(--text-main);
    z-index: 1;
    background: url('../../media/cover2.jpg') no-repeat center center/cover;
    height: auto;
}

.section-mempelai::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color); /* overlay ungu */
    z-index: 2;
    opacity: .5;
}

.section-mempelai .container-glass {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.section-mempelai h1,
.section-mempelai h2,
.section-mempelai h3,
.section-mempelai p {
    color: var(--text-dark);
}

.img-fluid{

}

.frame-img {
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    pointer-events: none;
}
.section.ending svg{
    animation: shape-animation 15s 5s ease-in-out infinite;
}
.img-fluid.rounded{
    /* border-radius: 5000px 5000px 5000px 5000px !important; */
    border-radius: 250px 250px 12px 12px !important;
    border: 5px solid var(--primary-soft);
}
@media (max-width: 768px) {
    .section-ucapan{
        height: 900px;
    }
    .section.section-hadiah{
        height: 690px;
    }
    
    .img-fluid{
        object-fit: cover;
    }

    .fixed-image {
        display: none;
    }
    .scroll-content,
    .landing {
        width: 100%;
    }

    .section.ending{
        height: 200px;
    }

    .section-mempelai {
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}

#snow-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.container-glass {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-invite{
    height: 400px;
    background-color: var(--primary-light-soft);;
}

.event-ico{
    width: 20%;
}
.section-event{
    height: auto !important;
}