body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white for foggy overlay */
    backdrop-filter: blur(12px); /* Creates a blur effect on the background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Keeps it above all other content */
    opacity: 1;
    transition: opacity 1s ease-out;
    animation: moveClouds 10s linear infinite, zoomInOut 2.5s ease-in-out, fadeOut 1s 2.5s forwards; /* Moving clouds + combined animations */
    background-image: url('https://i.ibb.co/st7sh7w/img-Uxl-S5p-Bh01w-ICOJx-Nr-Aa-K-Photoroom.png'), url('https://www.transparenttextures.com/patterns/fog.png');
    background-repeat: no-repeat, repeat; /* Keep the logo fixed, but repeat the fog pattern */
    background-position: center, top; /* Center logo, fog pattern starts from the top */
    background-size: contain, 200%; /* Adjust the image to fit nicely, and the fog pattern to be large */
}

/* Keyframes for moving clouds effect */
@keyframes moveClouds {
    from {
        background-position: center, 0% 0%; /* Start with fog at the top */
    }
    to {
        background-position: center, 0% 100%; /* Move the fog pattern down */
    }
}

/* Keyframes for zoom in and zoom out effect */
@keyframes zoomInOut {
    0% {
        transform: scale(0.8); /* Start slightly smaller */
    }
    50% {
        transform: scale(1.2); /* Zoom in to 120% size */
    }
    100% {
        transform: scale(1); /* Return to original size */
    }
}

/* Keyframes for fade out */
@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}
body {
    margin: 0;
    background: #FFF; /* Change to match your website's theme */
    /* Remove overflow: hidden to allow scrolling */
}

/* مؤقتًا: يحدد لك عناصر قائمة الهيدر بإطار */
.header nav ul > li { outline: 1px dashed red !important; }

}