html { 
    background-image: url('../bahan/background-utama.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
    body {
        background-image: url('../bahan/background-utama.jpg');
        font-family: 'Josefin Sans', sans-serif !important;
        padding: 0 !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        background-repeat: no-repeat;
        background-color: #000;
        background-size: 360px 530px;
        max-width: 368px;
    }

    .background-home-atas {
        background-image: url('../bahan/background-home-atas.png');
        background-repeat: no-repeat;
        background-size: 350px 550px;
        margin-left: -6px;
        width: 350px;
        height: 620px;
        margin-top: 77px;
        margin-bottom: -130px;
    }

    .bingkai-atas{
        background-image: url('../bahan/bingkai-atas.png');
        background-size: contain;
        background-position-x: center;
        align-items: center;
        width: 100%;
        height: 320px;
        margin-top: -65px;
        background-repeat: no-repeat;     
        }

    .background-kedua {
        background-image: url('../bahan/background-kedua.jpg');
        background-repeat: no-repeat;
        background-size: 360px 361px;
        margin-top: 67px;
        padding-top: 0px;
    }

    .background-mempelai {
        background-image: url('../bahan/background-mempelai.jpg');
        background-repeat: no-repeat;
        background-size: 360px 1080px;
    }
  
    .dark-section {
        background-image: url('../bahan/background-2.jpg');
        background-repeat: no-repeat;
        background-size: 360px 972px;
        background-repeat: no-repeat;
    }

    .dark-section1 {
        overflow-wrap: break-word !important;
        color: #000000 !important;
        margin-top: 3.9rem;
        background-repeat: no-repeat;
        background-size: 360px 677px;
    }

    body::-webkit-scrollbar {
        display: none !important;
    }
    
    .font-esthetic {
        font-family: 'Sacramento', cursive !important;
        color: #b67417 !important;

    }
    
    .font-arabic {
        font-family: 'Noto Naskh Arabic', serif !important;
        color: #fff !important;
    }
    
    .img-crop {
        margin-bottom: -5rem;
        width: 22rem;
        height: 22rem;
        margin-left: -5px;
        opacity: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 100%;
        border-color: transparent !important;
    }
    
    .img-crop img {
        display: inline;
        margin: auto;
        margin-left: 11px;
        height: 100%;
        width: 88%;
        background: transparent;
    }
    
    .btn-music {
        position: fixed;
        bottom: 13vh !important;
        right: 2vh !important;
        z-index: 1055 !important;
        color: #000;
    }
    
    .loading-page {
        position: fixed;
        inset: 0 !important;
        width: 100%;
        height: 100%;
        background-image: url('../bahan/background-utama.jpg');
        background-size: contain;
        background-color: transparent;
        z-index: 1056 !important;
        background-size: 360px 704px;
    }
    
    .card-body {
        overflow-wrap: break-word !important;
        background-image: url("https://i.ibb.co.com/M1CT1Js/id-11134207-7r98y-lnemuyxebu9t1f.jpg");
        color: #000000 !important;
        border-radius: 6px;
        border: 1.9px solid #000;
        margin-top: 3.9rem;
        box-shadow: 0 3px 1px #fda, 0 1px 3px #fda;
    }
    
    .spin-button {
        animation: spin-icon 5s linear infinite;
    }
    
    @keyframes love {
        50% {
            transform: translateY(1rem);
        }
    }
    
    .animate-love {
        animation: love 5s ease-in-out infinite;
    
    }
    
    footer {
        background-image: url('../bahan/background-lovegift.jpg');
        background-repeat: no-repeat;
        color: #000000 !important;
        margin-top: 0rem;
        padding-bottom: 5rem;
        padding-top: 0rem;
        border-color: transparent !important;
        background-repeat: no-repeat;
        background-size: 360px 270px;
        box-shadow: 0 6px 18px #fda, 0 -4px 11px gold;
    }

    .background-footer {
        background-image: url('https://media.istockphoto.com/id/466641016/vector/back-background-gold.jpg?s=612x612&w=0&k=20&c=muTmxxUXyE90Mp9E2zwX4UovcANF5HmiSg-by25U8Jo=');
        background-repeat: no-repeat;
        color: #000000 !important;
        margin-top: 0rem;
        padding-top: 0rem;
        border-color: transparent !important;
        background-repeat: no-repeat;
        background-size: 360px 220px;
        box-shadow: 0 0px 3px #fda;
    }
    
    /* Efek Salju Berjatuhan */
    .salju{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
    .cont-salju{height:100%;position:relative;overflow:hidden;z-index:1}


    .bunga-kiri-atas {
     background-image: url('../bahan/bunga-kiri-atas.png');
     background-size: 100px 300px;
     margin-bottom: -13rem;
     width: 100px;
     height: 200px;
     opacity: 100%;
     position: relative;
     overflow: hidden;
     border-color: transparent !important;
     background-repeat: no-repeat;
     position: left;
     z-index: -1;
         /* flip horizontally */
    transform: rotateY(180deg);
    }

       .font-esthetic-utama {
        font-family: 'Sacramento', cursive !important;
        color: #000000 !important;
    }


    .font-esthetic-utama{
        background-image: url('../bahan/bingkai.png');
        background-size: contain;
        align-items: center;
        width: 100%;
        height: 320px;
        background-repeat: no-repeat;     
        }

        .font-esthetic-utama h1{
        padding: 263px 20px 30px;
        color: #b67417;
        font: font-esthetic mb-4;
        font-size: 40px;
        }


        .font-esthetic-utama2{
            background-image: url('../bahan/bingkai.png');
            background-size: contain;
            align-items: center;
            width: 100%;
            height: 320px;
            margin-left: 35px;
            background-repeat: no-repeat;     
            }
    
            .font-esthetic-utama2 h1{
            padding: 144px 20px 30px;
            margin-left: -53px;
            color: #b67417;
            font: bold italic 28px sans-serif;
            }


        .home-bunga-kiri-atas {
            background-image: url('../bahan/bunga-kiri-atas.png');
            background-size: contain;
            margin-bottom: -12rem;
            width: 100px;
            height: 200px;
            opacity: 100%;
            position: flex;
            overflow: hidden;
            border-color: transparent !important;
            background-repeat: no-repeat;
            position: left;
            /* flip horizontally */
            transform: rotateY(180deg);
           }

        .home-bunga-kanan-bawah {
            background-image: url('../bahan/bunga-kanan-bawah.png');
            float: right;
            width: 70px;
            height: 200px;
            margin-top: -86px;
            margin-left: 278px;
            background-size: contain;
            margin-bottom: -13rem;
            opacity: 100%;
            position: absolute;
            overflow: hidden;
            border-color: transparent !important;
            background-repeat: no-repeat;
            }


            .bingkai-mempelai-wanita{
                background-image: url('../bahan/bingkai-mempelai-wanita.png');
                background-size: contain;
                background-position-x: center;
                align-items: center;
                width: 100%;
                height: 270px;
                margin-left: 5px;
                padding-bottom: 5px;
                margin-top: -7px;
                background-repeat: no-repeat;     
                }

                .bingkai-mempelai-wanita h1{
                    padding: 70px 20px 30px;
                    margin-left: -4px;
                    color: #ffffff;
                    font: bold italic 33px sans-serif;
                    }



        .bingkai-catin-wanita{
            background-image: url('../bahan/catin-wanita.png');
            background-size: contain;
            background-position-x: center;
            align-items: center;
            width: 100%;
            height: 245px;
            margin-left: 5px;
            padding-bottom: 5px;
            margin-top: -50px;
            background-repeat: no-repeat;     
            }

            
            .bingkai-catin-pria{
                background-image: url('../bahan/catin-pria.png');
                background-size: contain;
                background-position-x: center;
                align-items: center;
                width: 100%;
                height: 245px;
                margin-left: 5px;
                padding-bottom: 5px;
                margin-top: -80px;
                background-repeat: no-repeat;     
                }

                .background-quran {
                   background-image: url('../bahan/background-quran.jpg');
                   background-size: cover;
                   background-repeat: no-repeat;
                   background-size: 360px 400px;
                   margin-top: 0px;
                   padding-top: 33px;
                }

                .background-lovegift {
                    background-image: url('../bahan/background-lovegift.jpg');
                    background-repeat: no-repeat;
                    background-size: 360px 380px;
                    margin-top: -10px;
                    padding-top: 0px;
                }

                .background-ucapandoa {
                    background-image: url('../bahan/background-kedua.jpg');
                    background-repeat: no-repeat;
                    background-size: 360px 800px;
                    margin-top: -42px;
                }

                .turutmengundang {
                   background-image: url('../bahan/turut-mengundang.jpg');
                   background-size: cover;
                   background-repeat: no-repeat;
                   background-size: 352px 620px;
                   width: 360px;
                   height: 620px;
                   margin-top: 0px;
                   padding-top: 33px;
                   margin-left: -24px;
                }

                .googlemaps {
                    background-image: url('../bahan/background-kedua.jpg');
                    background-repeat: no-repeat;
                    background-size: 360px 800px;
                    margin-left: -8px;
                }