/* P24 Animated Preloader Styles - Strictly Scoped */
#preloader-overlay,
.p24-preloader-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(11, 18, 32, 0.85) !important;
    z-index: 9999999 !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#preloader-overlay.active,
.p24-preloader-overlay.active,
#preloader-overlay[style*="display: flex"],
#preloader-overlay[style*="display: block"] {
    display: flex !important;
}

#divPreloader,
.p24-div-preloader {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000000 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Scoped exclusively inside #divPreloader so no other site elements (like header .logo) are affected */
#divPreloader .wrap,
#divPreloader .p24-wrap {
    position: relative !important;
    width: 100px !important;
    height: 100px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
}

#divPreloader .wrap > svg,
#divPreloader .p24-wrap > svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

#divPreloader .logo,
#divPreloader .p24-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 48% !important;
    aspect-ratio: 832 / 816 !important;
    transform: translate(-50%, -50%) !important;
}

#divPreloader .logo svg,
#divPreloader .p24-logo svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

#divPreloader .burst,
#divPreloader .p24-burst {
    position: absolute !important;
    inset: 0 !important;
    border: 2px solid #22d3ff !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#divPreloader .arc,
#divPreloader .p24-arc {
    fill: none !important;
    stroke-width: 12 !important;
    transform-origin: 160px 160px !important;
    animation: p24Spin linear infinite !important;
}

#divPreloader .a1,
#divPreloader .p24-a1 {
    animation-duration: 1.8s !important;
}

#divPreloader .a2,
#divPreloader .p24-a2 {
    animation-duration: 1.4s !important;
    animation-direction: reverse !important;
}

#divPreloader .a3,
#divPreloader .p24-a3 {
    animation-duration: 1s !important;
}

#divPreloader .a4,
#divPreloader .p24-a4 {
    animation-duration: 0.8s !important;
    animation-direction: reverse !important;
}

@keyframes p24Spin {
    from {
        transform: rotate(-90deg);
    }
    to {
        transform: rotate(270deg);
    }
}