html { 
    background: url(https://i.pinimg.com/564x/90/e8/f0/90e8f025f0fce1f623656db30acba889.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
    body {
    background: url("https://i.ibb.co.com/kSXzwLf/Background-V1.jpg") no-repeat center center fixed; 
        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: #fff;
        background-size: 360px 710px;

    }
  
    .dark-section {
        background-image: url("https://i.ibb.co.com/x7kmzhJ/Background-V2.jpg");
        background-repeat: no-repeat;
        background-size: 360px 710px;
    }

    .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: #000000 !important;

    }
    
    .font-arabic {
        font-family: 'Noto Naskh Arabic', serif !important;
        color: #000000 !important;
    }
    
    .img-crop {
        margin-bottom: -7rem;
        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: 10px;
        height: 75%;
        width: 75%;
        background:  transparent;
    }
    
    .btn-music {
        position: fixed;
        bottom: 19vh !important;
        right: 2vh !important;
        z-index: 1055 !important;
    }
    
    .loading-page {
        position: fixed;
        inset: 0 !important;
        width: 100%;
        height: 100%;
        background-image: url("https://img.freepik.com/free-vector/arabic-pattern-shiny-gold-frame_53876-99826.jpg");
        background-repeat: no-repeat;
        background-color: transparent;
        z-index: 1056 !important;
        background-size: 360px 770px;
    }
    
    .card-body {
        overflow-wrap: break-word !important;
        background-image: url("https://media.istockphoto.com/id/1364650429/vector/white-marble-vector-texture-gold-cracked-kintsugi-background-elegant-card.jpg?s=612x612&w=0&k=20&c=ZiEkunxRB3J6WbSUNom8XaiGId7eErv_Tv_nh2RoxAo=");
        color: #000000 !important;
        border-radius: 6px;
        border: 1.9px solid #000;
        margin-top: 3.9rem;
    }
    
    .mouse-animation {
        padding: 0.25rem 0.625rem;
        height: 2rem;
        border: 0.1rem solid #ffffff;
        border-radius: 1.4rem;
        opacity: 0.75;
        box-sizing: content-box;
    }
    
    @keyframes scroll {
        0% {
            opacity: 0;
    
        }
    
        10% {
            transform: translateY(0);
            opacity: 1;
        }
    
        100% {
            transform: translateY(1rem);
            opacity: 0;
        }
    }
    
    .mouse-animation>.scroll-animation {
        width: 0.25rem;
        height: 0.625rem;
        border-radius: 25%;
        background-color: #ffffff;
        animation-name: scroll;
        animation-duration: 2.5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes spin-icon {
        from {
            transform: rotate(0deg);
        }
    
        to {
            transform: rotate(360deg);
        }
    }
    
    .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("https://img.freepik.com/premium-vector/simple-luxury-ornamental-mandala-vector-background_179530-585.jpg?semt=ais_hybrid");
        background-repeat: no-repeat;
        color: #000000 !important;
        margin-top: 1rem;
        padding-bottom: 5rem;
        box-shadow: 0 4px 8px #000, 0 -1px 1px #000;
        height: 410px;
    }
    
    /* 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}