.elementor-6291 .elementor-element.elementor-element-7b26ba5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}#elementor-popup-modal-6291 .dialog-widget-content{animation-duration:1.2s;background-image:url("https://unitechmachinery.co.uk/wp-content/uploads/Unitech-Christmas-Popup.webp");background-position:center center;background-repeat:no-repeat;background-size:contain;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-6291{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-6291 .dialog-message{width:40vw;height:100vh;align-items:flex-start;}#elementor-popup-modal-6291 .dialog-close-button{display:flex;}/* Start custom CSS for container, class: .elementor-element-7b26ba5 */.elementor-6291 .elementor-element.elementor-element-7b26ba5 {
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Optional: ensures container background shows through */
}

.elementor-6291 .elementor-element.elementor-element-7b26ba5::before,
.elementor-6291 .elementor-element.elementor-element-7b26ba5::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 50%; /* Rounds the particles */
}

/* --- LAYER 1: The "Blizzard" (Small, distant, dense) --- */
.elementor-6291 .elementor-element.elementor-element-7b26ba5::before {
    /* We are creating 7 different snowflakes per tile here. 
       Notice the random % positions (e.g., 10% 25%).
    */
    background-image: 
        radial-gradient(circle at 10% 25%, rgba(255, 255, 255, 0.9) 1px, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.8) 1.5px, transparent 2.5px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
        radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.8) 1.5px, transparent 2.5px),
        radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
        radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.9) 1px, transparent 2px);
    
    /* Using a Prime number (503px) prevents it from aligning with the other layer */
    background-size: 503px 503px;
    
    /* Slight blur to push it into the background */
    filter: blur(1px);
    
    /* Slower animation for distance */
    animation: snow-fall 20s linear infinite;
}

/* --- LAYER 2: The "Flakes" (Larger, closer, faster) --- */
.elementor-6291 .elementor-element.elementor-element-7b26ba5::after {
    /* 5 Larger snowflakes scattered randomly */
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 1) 2px, transparent 3px),
        radial-gradient(circle at 45% 75%, rgba(255, 255, 255, 0.9) 3px, transparent 4px),
        radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 1) 2px, transparent 3px),
        radial-gradient(circle at 60% 50%, rgba(255, 255, 255, 0.8) 2.5px, transparent 3.5px),
        radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.9) 3px, transparent 4px);
    
    /* A different Prime number size (401px) to misalign with layer 1 */
    background-size: 401px 401px;
    
    /* Faster animation for foreground */
    animation: snow-fall 13s linear infinite;
}

/* --- THE MOVEMENT --- */
@keyframes snow-fall {
    0% {
        background-position: 0 0;
    }
    100% {
        /* We move the background down by a massive amount.
           Because it repeats, this creates the infinite loop.
        */
        background-position: 0 1000px;
    }
}/* End custom CSS */