.mkdf-custom-preloader {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important; /* Changed from default */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #191919;
    z-index: 9999 !important; /* Ensures it's on top of everything */
}

.custom-logo-animation {
    width: 450px;
}

.animated-logo {
    width: 100%;
    height: 100%;
}

.logo-element {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.outline-layer .outline {
    fill: #191919; 
    stroke: #191919;
    stroke-width: 1;
}


.gold-layer .gold-flow, 
.gold-layer .text-gold {
    fill: rgba(201, 169, 97, 0); 
    stroke: #C9A961;
    stroke-width: 2.5;
    stroke-dasharray: 6000;
    stroke-dashoffset: 6000;
    
    animation: 
        draw-line 2s ease-in-out forwards, 
        smooth-fill 1s ease-in-out 1.2s forwards; 
}


@keyframes smooth-fill {
    0% {
        fill: rgba(201, 169, 97, 0);
    }
    100% {
        fill: #FFEB9C; 
        stroke: #C9A961;
    }
}


.top-arch-gold, .top-line-gold, .middle-line-gold, .bottom-arch-gold, .text-letters-gold {
    stroke-dasharray: 6000; 
    stroke-dashoffset: 6000;
}


.animated-logo {
    filter: drop-shadow(0 0 0 transparent);
    animation: glow 0.8s ease-out 2s forwards;
}



@keyframes draw-line {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes glow {
    to {
        filter: drop-shadow(0 0 12px rgba(201, 169, 97, 0.7))
                drop-shadow(0 0 24px rgba(201, 169, 97, 0.3));
    }
}

@media (max-width: 768px) {
    .custom-logo-animation {
        width: 340px;
        height: 230px;
    }
}