/* ================================================================
   QUICK REFERENCE — ALL PATTERN IDs
   Copy any ID directly into your Elementor section
   ================================================================

   SUFFIX GUIDE:
   (no suffix)       = Static / No animation
   -top-bottom       = Moves Top → Bottom
   -left-right       = Moves Left → Right
   -right-left       = Moves Right → Left
   -zoom-out         = Zoom Out (ease-out + opacity fade)
   -zoom-out-2       = Zoom Smooth (linear, no fade)
   -mix              = Organic Random Motion
   ================================================================ */


/* ── 1. SQUARES ─────────────────────────────────────────────── */
/*
    #pattern-squares
    #pattern-squares-top-bottom
    #pattern-squares-left-right
    #pattern-squares-right-left
    #pattern-squares-zoom-out
    #pattern-squares-zoom-out-2
    #pattern-squares-mix
*/

/* ── 2. BASIC DOTS ──────────────────────────────────────────── */
/*
    #pattern-dots
    #pattern-dots-top-bottom
    #pattern-dots-left-right
    #pattern-dots-right-left
    #pattern-dots-zoom-out
    #pattern-dots-zoom-out-2
    #pattern-dots-mix
*/

/* ── 3. DIAGONAL LINES ──────────────────────────────────────── */
/*
    #pattern-diagonal
    #pattern-diagonal-top-bottom
    #pattern-diagonal-left-right
    #pattern-diagonal-right-left
    #pattern-diagonal-zoom-out
    #pattern-diagonal-zoom-out-2
    #pattern-diagonal-mix
*/

/* ── 4. CROSS DOTS ──────────────────────────────────────────── */
/*
    #pattern-crossdots
    #pattern-crossdots-top-bottom
    #pattern-crossdots-left-right
    #pattern-crossdots-right-left
    #pattern-crossdots-zoom-out
    #pattern-crossdots-zoom-out-2
    #pattern-crossdots-mix
*/

/* ── 5. REAL WAVES (CURVY) ──────────────────────────────────── */
/*
    #pattern-real-waves
    #pattern-real-waves-top-bottom
    #pattern-real-waves-left-right
    #pattern-real-waves-right-left
    #pattern-real-waves-zoom-out
    #pattern-real-waves-zoom-out-2
    #pattern-real-waves-mix
*/

/* ── 6. HONEYCOMB ───────────────────────────────────────────── */
/*
    #pattern-honeycomb
    #pattern-honeycomb-top-bottom
    #pattern-honeycomb-left-right
    #pattern-honeycomb-right-left
    #pattern-honeycomb-zoom-out
    #pattern-honeycomb-zoom-out-2
    #pattern-honeycomb-mix
*/

/* ── 7. ZIG-ZAG ─────────────────────────────────────────────── */
/*
    #pattern-zigzag
    #pattern-zigzag-top-bottom
    #pattern-zigzag-left-right
    #pattern-zigzag-right-left
    #pattern-zigzag-zoom-out
    #pattern-zigzag-zoom-out-2
    #pattern-zigzag-mix
*/

/* ── 8. BLUEPRINT ───────────────────────────────────────────── */
/*
    #pattern-blueprint
    #pattern-blueprint-top-bottom
    #pattern-blueprint-left-right
    #pattern-blueprint-right-left
    #pattern-blueprint-zoom-out
    #pattern-blueprint-zoom-out-2
    #pattern-blueprint-mix
*/

/* ── 9. MESH / DIAMOND DOTS ─────────────────────────────────── */
/*
    #pattern-mesh
    #pattern-mesh-top-bottom
    #pattern-mesh-left-right
    #pattern-mesh-right-left
    #pattern-mesh-zoom-out
    #pattern-mesh-zoom-out-2
    #pattern-mesh-mix
*/

/* ── 10. POLKA DOTS (LARGE) ─────────────────────────────────── */
/*
    #pattern-polka
    #pattern-polka-top-bottom
    #pattern-polka-left-right
    #pattern-polka-right-left
    #pattern-polka-zoom-out
    #pattern-polka-zoom-out-2
    #pattern-polka-mix
*/

/* ── 11. PLUS SIGNS ─────────────────────────────────────────── */
/*
    #pattern-plus
    #pattern-plus-top-bottom
    #pattern-plus-left-right
    #pattern-plus-right-left
    #pattern-plus-zoom-out
    #pattern-plus-zoom-out-2
    #pattern-plus-mix
*/

/* ── 12. TRIANGLES ──────────────────────────────────────────── */
/*
    #pattern-triangles
    #pattern-triangles-top-bottom
    #pattern-triangles-left-right
    #pattern-triangles-right-left
    #pattern-triangles-zoom-out
    #pattern-triangles-zoom-out-2
    #pattern-triangles-mix
*/

/* ── 13. HORIZONTAL STRIPES ─────────────────────────────────── */
/*
    #pattern-stripes-h
    #pattern-stripes-h-top-bottom
    #pattern-stripes-h-left-right
    #pattern-stripes-h-right-left
    #pattern-stripes-h-zoom-out
    #pattern-stripes-h-zoom-out-2
    #pattern-stripes-h-mix
*/

/* ── 14. VERTICAL STRIPES ───────────────────────────────────── */
/*
    #pattern-stripes-v
    #pattern-stripes-v-top-bottom
    #pattern-stripes-v-left-right
    #pattern-stripes-v-right-left
    #pattern-stripes-v-zoom-out
    #pattern-stripes-v-zoom-out-2
    #pattern-stripes-v-mix
*/

/* ── 15. BRICK WALL ─────────────────────────────────────────── */
/*
    #pattern-bricks
    #pattern-bricks-top-bottom
    #pattern-bricks-left-right
    #pattern-bricks-right-left
    #pattern-bricks-zoom-out
    #pattern-bricks-zoom-out-2
    #pattern-bricks-mix
*/

/* ── 16. CONCENTRIC CIRCLES ─────────────────────────────────── */
/*
    #pattern-circles
    #pattern-circles-top-bottom
    #pattern-circles-left-right
    #pattern-circles-right-left
    #pattern-circles-zoom-out
    #pattern-circles-zoom-out-2
    #pattern-circles-mix
*/

/* ── 17. DIAMOND SHAPES ─────────────────────────────────────── */
/*
    #pattern-diamonds
    #pattern-diamonds-top-bottom
    #pattern-diamonds-left-right
    #pattern-diamonds-right-left
    #pattern-diamonds-zoom-out
    #pattern-diamonds-zoom-out-2
    #pattern-diamonds-mix
*/

/* ── 18. MICRO GRID ─────────────────────────────────────────── */
/*
    #pattern-microgrid
    #pattern-microgrid-top-bottom
    #pattern-microgrid-left-right
    #pattern-microgrid-right-left
    #pattern-microgrid-zoom-out
    #pattern-microgrid-zoom-out-2
    #pattern-microgrid-mix
*/

/* ── 19. STAR / SPARKLE DOTS ────────────────────────────────── */
/*
    #pattern-sparkle
    #pattern-sparkle-top-bottom
    #pattern-sparkle-left-right
    #pattern-sparkle-right-left
    #pattern-sparkle-zoom-out
    #pattern-sparkle-zoom-out-2
    #pattern-sparkle-mix
*/

/* ── 20. SLANTED PLAID ──────────────────────────────────────── */
/*
    #pattern-plaid
    #pattern-plaid-top-bottom
    #pattern-plaid-left-right
    #pattern-plaid-right-left
    #pattern-plaid-zoom-out
    #pattern-plaid-zoom-out-2
    #pattern-plaid-mix
*/

/* ── 21. WOVEN ──────────────────────────────────────────────── */
/*
    #pattern-woven
    #pattern-woven-top-bottom
    #pattern-woven-left-right
    #pattern-woven-right-left
    #pattern-woven-zoom-out
    #pattern-woven-zoom-out-2
    #pattern-woven-mix
*/

/* ── 22. BUBBLING DRINK ─────────────────────────────────────── */
/*
    #pattern-bubbles-alt
    #pattern-bubbles-alt-top-bottom
    #pattern-bubbles-alt-left-right
    #pattern-bubbles-alt-right-left
    #pattern-bubbles-alt-zoom-out
    #pattern-bubbles-alt-zoom-out-2
    #pattern-bubbles-alt-mix
*/

/* ── 23. GINGHAM ────────────────────────────────────────────── */
/*
    #pattern-gingham
    #pattern-gingham-top-bottom
    #pattern-gingham-left-right
    #pattern-gingham-right-left
    #pattern-gingham-zoom-out
    #pattern-gingham-zoom-out-2
    #pattern-gingham-mix
*/

/* ================================================================
   TOTAL: 23 patterns × 7 versions = 161 unique IDs
   ================================================================ */








/* ================================================================
   ALL ELEMENTOR BACKGROUND OVERLAY PATTERNS
   Structure for each pattern:
     Base (static)
     -top-bottom   → A: Moves Top to Bottom
     -left-right   → B: Moves Left to Right
     -right-left   → C: Moves Right to Left
     -zoom-out     → D: Zoom Out (ease-out, opacity fade)
     -zoom-out-2   → E: Zoom Smooth (linear, no fade)
     -mix          → F: Organic Random Motion
   ================================================================ */


/* ================================================================
   1. SQUARES
   ================================================================ */

#pattern-squares .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
}

/* 1A. Squares - Top to Bottom */
#pattern-squares-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
    animation: squaresTopBottom 10s linear infinite;
}
@keyframes squaresTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 50px; }
}

/* 1B. Squares - Left to Right */
#pattern-squares-left-right .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
    animation: squaresLeftRight 10s linear infinite;
}
@keyframes squaresLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 50px 0; }
}

/* 1C. Squares - Right to Left */
#pattern-squares-right-left .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
    animation: squaresRightLeft 10s linear infinite;
}
@keyframes squaresRightLeft {
    from { background-position: 50px 0; }
    to   { background-position: 0 0; }
}

/* 1D. Squares - Zoom Out */
#pattern-squares-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
    animation: squaresZoomOut 18s ease-out infinite;
}
@keyframes squaresZoomOut {
    0%   { background-size: 50px 50px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 1E. Squares - Zoom Smooth */
#pattern-squares-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
    animation: squaresZoomSmooth 25s linear infinite;
}
@keyframes squaresZoomSmooth {
    0%   { background-size: 50px 50px; }
    100% { background-size: 500px 500px; }
}

/* 1F. Squares - Organic */
#pattern-squares-mix .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0;
    animation: squaresOrganic 35s ease-in-out infinite alternate;
}
@keyframes squaresOrganic {
    0%   { background-position: 0 0;         background-size: 50px 50px; }
    20%  { background-position: 100px -80px; background-size: 70px 70px; }
    40%  { background-position: -60px 120px; background-size: 40px 40px; }
    60%  { background-position: 80px 80px;   background-size: 80px 80px; }
    80%  { background-position: -40px -60px; background-size: 60px 60px; }
    100% { background-position: 0 0;         background-size: 50px 50px; }
}


/* ================================================================
   2. BASIC DOTS
   ================================================================ */

#pattern-dots .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* 2A. Dots - Top to Bottom */
#pattern-dots-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: dotsTopBottom 12s linear infinite;
}
@keyframes dotsTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 30px; }
}

/* 2B. Dots - Left to Right */
#pattern-dots-left-right .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: dotsLeftRight 12s linear infinite;
}
@keyframes dotsLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 30px 0; }
}

/* 2C. Dots - Right to Left */
#pattern-dots-right-left .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: dotsRightLeft 12s linear infinite;
}
@keyframes dotsRightLeft {
    from { background-position: 30px 0; }
    to   { background-position: 0 0; }
}

/* 2D. Dots - Zoom Out */
#pattern-dots-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.35) 2px, transparent 3px);
    background-repeat: repeat;
    background-position: center;
    animation: dotsZoomOut 18s ease-out infinite;
}
@keyframes dotsZoomOut {
    0%   { background-size: 30px 30px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 2E. Dots - Zoom Smooth */
#pattern-dots-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: dotsZoomSmooth 25s linear infinite;
}
@keyframes dotsZoomSmooth {
    0%   { background-size: 30px 30px; }
    100% { background-size: 500px 500px; }
}

/* 2F. Dots - Organic */
#pattern-dots-mix .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: 0 0;
    animation: dotsOrganic 35s ease-in-out infinite alternate;
}
@keyframes dotsOrganic {
    0%   { background-position: 0 0;         background-size: 30px 30px; }
    20%  { background-position: 80px -60px;  background-size: 50px 50px; }
    40%  { background-position: -40px 100px; background-size: 20px 20px; }
    60%  { background-position: 60px 60px;   background-size: 55px 55px; }
    80%  { background-position: -30px -50px; background-size: 40px 40px; }
    100% { background-position: 0 0;         background-size: 30px 30px; }
}


/* ================================================================
   3. DIAGONAL LINES
   ================================================================ */

#pattern-diagonal .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
}

/* 3A. Diagonal - Top to Bottom */
#pattern-diagonal-top-bottom .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
    animation: diagTopBottom 8s linear infinite;
}
@keyframes diagTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 60px; }
}

/* 3B. Diagonal - Left to Right */
#pattern-diagonal-left-right .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
    animation: diagLeftRight 8s linear infinite;
}
@keyframes diagLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 60px 0; }
}

/* 3C. Diagonal - Right to Left */
#pattern-diagonal-right-left .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
    animation: diagRightLeft 8s linear infinite;
}
@keyframes diagRightLeft {
    from { background-position: 60px 0; }
    to   { background-position: 0 0; }
}

/* 3D. Diagonal - Zoom Out */
#pattern-diagonal-zoom-out .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
    animation: diagZoomOut 18s ease-out infinite;
}
@keyframes diagZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 3E. Diagonal - Zoom Smooth */
#pattern-diagonal-zoom-out-2 .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
    animation: diagZoomSmooth 25s linear infinite;
}
@keyframes diagZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 500px 500px; }
}

/* 3F. Diagonal - Organic */
#pattern-diagonal-mix .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #ffffff1c 20px, #ffffff1c 21px);
    background-size: 60px 60px;
    background-position: 0 0;
    animation: diagOrganic 35s ease-in-out infinite alternate;
}
@keyframes diagOrganic {
    0%   { background-position: 0 0;          background-size: 60px 60px; }
    20%  { background-position: 120px -100px; background-size: 80px 80px; }
    40%  { background-position: -80px 150px;  background-size: 40px 40px; }
    60%  { background-position: 100px 80px;   background-size: 90px 90px; }
    80%  { background-position: -60px -80px;  background-size: 70px 70px; }
    100% { background-position: 0 0;          background-size: 60px 60px; }
}


/* ================================================================
   4. CROSS DOTS
   ================================================================ */

#pattern-crossdots .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* 4A. CrossDots - Top to Bottom */
#pattern-crossdots-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    animation: crossDotsTopBottom 12s linear infinite;
}
@keyframes crossDotsTopBottom {
    from { background-position: 0 0,    15px 15px; }
    to   { background-position: 0 30px, 15px 45px; }
}

/* 4B. CrossDots - Left to Right */
#pattern-crossdots-left-right .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    animation: crossDotsLeftRight 12s linear infinite;
}
@keyframes crossDotsLeftRight {
    from { background-position: 0 0,    15px 15px; }
    to   { background-position: 30px 0, 45px 15px; }
}

/* 4C. CrossDots - Right to Left */
#pattern-crossdots-right-left .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    animation: crossDotsRightLeft 12s linear infinite;
}
@keyframes crossDotsRightLeft {
    from { background-position: 30px 0, 45px 15px; }
    to   { background-position: 0 0,    15px 15px; }
}

/* 4D. CrossDots - Zoom Out */
#pattern-crossdots-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: crossDotsZoomOut 18s ease-out infinite;
}
@keyframes crossDotsZoomOut {
    0%   { background-size: 30px 30px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 4E. CrossDots - Zoom Smooth */
#pattern-crossdots-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: crossDotsZoomSmooth 25s linear infinite;
}
@keyframes crossDotsZoomSmooth {
    0%   { background-size: 30px 30px; }
    100% { background-size: 500px 500px; }
}

/* 4F. CrossDots - Organic */
#pattern-crossdots-mix .elementor-background-overlay {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px),
                      radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 30px 30px;
    animation: crossDotsOrganic 35s ease-in-out infinite alternate;
}
@keyframes crossDotsOrganic {
    0%   { background-position: 0 0,          15px 15px;   background-size: 30px 30px; }
    20%  { background-position: 80px -60px,   95px -45px;  background-size: 50px 50px; }
    40%  { background-position: -40px 90px,  -25px 105px;  background-size: 20px 20px; }
    60%  { background-position: 60px 60px,    75px 75px;   background-size: 55px 55px; }
    80%  { background-position: -30px -40px, -15px -25px;  background-size: 40px 40px; }
    100% { background-position: 0 0,          15px 15px;   background-size: 30px 30px; }
}


/* ================================================================
   5. REAL WAVES (CURVY)
   ================================================================ */

#pattern-real-waves .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-size: 80px 40px;
    background-position: 0 0, 40px 0;
}

/* 5A. Waves - Top to Bottom */
#pattern-real-waves-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-size: 80px 40px;
    animation: wavesTopBottom 12s linear infinite;
}
@keyframes wavesTopBottom {
    from { background-position: 0 0,     40px 0; }
    to   { background-position: 0 40px,  40px 40px; }
}

/* 5B. Waves - Left to Right */
#pattern-real-waves-left-right .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-size: 80px 40px;
    animation: wavesLeftRight 14s linear infinite;
}
@keyframes wavesLeftRight {
    from { background-position: 0 0,    40px 0; }
    to   { background-position: 80px 0, 120px 0; }
}

/* 5C. Waves - Right to Left */
#pattern-real-waves-right-left .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-size: 80px 40px;
    animation: wavesRightLeft 14s linear infinite;
}
@keyframes wavesRightLeft {
    from { background-position: 80px 0, 120px 0; }
    to   { background-position: 0 0,    40px 0; }
}

/* 5D. Waves - Zoom Out */
#pattern-real-waves-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-position: 0 0, 40px 0;
    animation: wavesZoomOut 18s ease-out infinite;
}
@keyframes wavesZoomOut {
    0%   { background-size: 80px 40px;   opacity: 0.6; }
    100% { background-size: 800px 400px; opacity: 0.2; }
}

/* 5E. Waves - Zoom Smooth */
#pattern-real-waves-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-position: 0 0, 40px 0;
    animation: wavesZoomSmooth 25s linear infinite;
}
@keyframes wavesZoomSmooth {
    0%   { background-size: 80px 40px; }
    100% { background-size: 800px 400px; }
}

/* 5F. Waves - Organic */
#pattern-real-waves-mix .elementor-background-overlay {
    background-image: radial-gradient(circle at 50% 0, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px),
                      radial-gradient(circle at 50% 100%, transparent 0, transparent 20px, #ffffff1c 21px, #ffffff1c 23px, transparent 24px);
    background-size: 80px 40px;
    animation: wavesOrganic 35s ease-in-out infinite alternate;
}
@keyframes wavesOrganic {
    0%   { background-position: 0 0,           40px 0;      background-size: 80px 40px; }
    20%  { background-position: 100px -30px,   140px -30px; background-size: 110px 55px; }
    40%  { background-position: -60px 50px,    -20px 50px;  background-size: 60px 30px; }
    60%  { background-position: 80px 40px,     120px 40px;  background-size: 120px 60px; }
    80%  { background-position: -40px -20px,    0px -20px;  background-size: 90px 45px; }
    100% { background-position: 0 0,           40px 0;      background-size: 80px 40px; }
}


/* ================================================================
   6. HONEYCOMB
   ================================================================ */

#pattern-honeycomb .elementor-background-overlay {
    background: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent) 50px 50px;
    background-size: 100px 100px;
}

/* 6A. Honeycomb - Top to Bottom */
#pattern-honeycomb-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                      radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent);
    background-size: 100px 100px;
    animation: honeycombTopBottom 14s linear infinite;
}
@keyframes honeycombTopBottom {
    from { background-position: 0 0,     50px 50px; }
    to   { background-position: 0 100px, 50px 150px; }
}

/* 6B. Honeycomb - Left to Right */
#pattern-honeycomb-left-right .elementor-background-overlay {
    background-image: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                      radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent);
    background-size: 100px 100px;
    animation: honeycombLeftRight 14s linear infinite;
}
@keyframes honeycombLeftRight {
    from { background-position: 0 0,      50px 50px; }
    to   { background-position: 100px 0,  150px 50px; }
}

/* 6C. Honeycomb - Right to Left */
#pattern-honeycomb-right-left .elementor-background-overlay {
    background-image: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                      radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent);
    background-size: 100px 100px;
    animation: honeycombRightLeft 14s linear infinite;
}
@keyframes honeycombRightLeft {
    from { background-position: 100px 0,  150px 50px; }
    to   { background-position: 0 0,      50px 50px; }
}

/* 6D. Honeycomb - Zoom Out */
#pattern-honeycomb-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                      radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent);
    background-position: 0 0, 50px 50px;
    animation: honeycombZoomOut 18s ease-out infinite;
}
@keyframes honeycombZoomOut {
    0%   { background-size: 100px 100px; opacity: 0.6; }
    100% { background-size: 800px 800px; opacity: 0.2; }
}

/* 6E. Honeycomb - Zoom Smooth */
#pattern-honeycomb-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                      radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent);
    background-position: 0 0, 50px 50px;
    animation: honeycombZoomSmooth 25s linear infinite;
}
@keyframes honeycombZoomSmooth {
    0%   { background-size: 100px 100px; }
    100% { background-size: 800px 800px; }
}

/* 6F. Honeycomb - Organic */
#pattern-honeycomb-mix .elementor-background-overlay {
    background-image: radial-gradient(circle at 100% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent),
                      radial-gradient(circle at 0% 50%, transparent 20%, #ffffff12 21%, #ffffff12 34%, transparent 35%, transparent);
    background-size: 100px 100px;
    animation: honeycombOrganic 35s ease-in-out infinite alternate;
}
@keyframes honeycombOrganic {
    0%   { background-position: 0 0,           50px 50px;   background-size: 100px 100px; }
    20%  { background-position: 150px -120px,  200px -70px; background-size: 140px 140px; }
    40%  { background-position: -80px 180px,   -30px 230px; background-size: 70px 70px; }
    60%  { background-position: 120px 100px,   170px 150px; background-size: 150px 150px; }
    80%  { background-position: -60px -80px,   -10px -30px; background-size: 110px 110px; }
    100% { background-position: 0 0,           50px 50px;   background-size: 100px 100px; }
}


/* ================================================================
   7. ZIG-ZAG
   ================================================================ */

#pattern-zigzag .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-position: 25px 0, 25px 0, 0 0, 0 0;
    background-size: 50px 50px;
}

/* 7A. ZigZag - Top to Bottom */
#pattern-zigzag-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-size: 50px 50px;
    animation: zigzagTopBottom 12s linear infinite;
}
@keyframes zigzagTopBottom {
    from { background-position: 25px 0,    25px 0,    0 0,    0 0; }
    to   { background-position: 25px 50px, 25px 50px, 0 50px, 0 50px; }
}

/* 7B. ZigZag - Left to Right */
#pattern-zigzag-left-right .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-size: 50px 50px;
    animation: zigzagLeftRight 12s linear infinite;
}
@keyframes zigzagLeftRight {
    from { background-position: 25px 0, 25px 0, 0 0, 0 0; }
    to   { background-position: 75px 0, 75px 0, 50px 0, 50px 0; }
}

/* 7C. ZigZag - Right to Left */
#pattern-zigzag-right-left .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-size: 50px 50px;
    animation: zigzagRightLeft 12s linear infinite;
}
@keyframes zigzagRightLeft {
    from { background-position: 75px 0, 75px 0, 50px 0, 50px 0; }
    to   { background-position: 25px 0, 25px 0, 0 0, 0 0; }
}

/* 7D. ZigZag - Zoom Out */
#pattern-zigzag-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-position: 25px 0, 25px 0, 0 0, 0 0;
    animation: zigzagZoomOut 18s ease-out infinite;
}
@keyframes zigzagZoomOut {
    0%   { background-size: 50px 50px;   opacity: 0.6; }
    100% { background-size: 500px 500px; opacity: 0.2; }
}

/* 7E. ZigZag - Zoom Smooth */
#pattern-zigzag-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-position: 25px 0, 25px 0, 0 0, 0 0;
    animation: zigzagZoomSmooth 25s linear infinite;
}
@keyframes zigzagZoomSmooth {
    0%   { background-size: 50px 50px; }
    100% { background-size: 500px 500px; }
}

/* 7F. ZigZag - Organic */
#pattern-zigzag-mix .elementor-background-overlay {
    background-image: linear-gradient(135deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(225deg, #ffffff1c 25%, transparent 25%),
                      linear-gradient(45deg,  #ffffff1c 25%, transparent 25%),
                      linear-gradient(315deg, #ffffff1c 25%, transparent 25%);
    background-size: 50px 50px;
    animation: zigzagOrganic 35s ease-in-out infinite alternate;
}
@keyframes zigzagOrganic {
    0%   { background-position: 25px 0,      25px 0,      0 0,      0 0;      background-size: 50px 50px; }
    20%  { background-position: 125px -80px, 125px -80px, 100px -80px, 100px -80px; background-size: 70px 70px; }
    40%  { background-position: -55px 120px, -55px 120px, -80px 120px, -80px 120px; background-size: 40px 40px; }
    60%  { background-position: 95px 80px,   95px 80px,   70px 80px,  70px 80px;  background-size: 80px 80px; }
    80%  { background-position: -35px -60px, -35px -60px, -60px -60px,-60px -60px; background-size: 60px 60px; }
    100% { background-position: 25px 0,      25px 0,      0 0,      0 0;      background-size: 50px 50px; }
}


/* ================================================================
   8. BLUEPRINT
   ================================================================ */

#pattern-blueprint .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* 8A. Blueprint - Top to Bottom */
#pattern-blueprint-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    animation: blueprintTopBottom 14s linear infinite;
}
@keyframes blueprintTopBottom {
    from { background-position: 0 0,      0 0,      0 0,    0 0; }
    to   { background-position: 0 100px,  0 100px,  0 20px, 0 20px; }
}

/* 8B. Blueprint - Left to Right */
#pattern-blueprint-left-right .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    animation: blueprintLeftRight 14s linear infinite;
}
@keyframes blueprintLeftRight {
    from { background-position: 0 0,      0 0,      0 0,    0 0; }
    to   { background-position: 100px 0,  100px 0,  20px 0, 20px 0; }
}

/* 8C. Blueprint - Right to Left */
#pattern-blueprint-right-left .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    animation: blueprintRightLeft 14s linear infinite;
}
@keyframes blueprintRightLeft {
    from { background-position: 100px 0,  100px 0,  20px 0, 20px 0; }
    to   { background-position: 0 0,      0 0,      0 0,    0 0; }
}

/* 8D. Blueprint - Zoom Out */
#pattern-blueprint-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    animation: blueprintZoomOut 18s ease-out infinite;
}
@keyframes blueprintZoomOut {
    0%   { background-size: 100px 100px, 100px 100px, 20px 20px,   20px 20px;   opacity: 0.6; }
    100% { background-size: 800px 800px, 800px 800px, 160px 160px, 160px 160px; opacity: 0.2; }
}

/* 8E. Blueprint - Zoom Smooth */
#pattern-blueprint-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    animation: blueprintZoomSmooth 25s linear infinite;
}
@keyframes blueprintZoomSmooth {
    0%   { background-size: 100px 100px, 100px 100px, 20px 20px,   20px 20px; }
    100% { background-size: 800px 800px, 800px 800px, 160px 160px, 160px 160px; }
}

/* 8F. Blueprint - Organic */
#pattern-blueprint-mix .elementor-background-overlay {
    background-image: linear-gradient(#ffffff0a 2px, transparent 2px),
                      linear-gradient(90deg, #ffffff0a 2px, transparent 2px),
                      linear-gradient(#ffffff05 1px, transparent 1px),
                      linear-gradient(90deg, #ffffff05 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    animation: blueprintOrganic 35s ease-in-out infinite alternate;
}
@keyframes blueprintOrganic {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0;
           background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
    20%  { background-position: 150px -100px, 150px -100px, 30px -20px, 30px -20px;
           background-size: 130px 130px, 130px 130px, 26px 26px, 26px 26px; }
    40%  { background-position: -80px 160px, -80px 160px, -16px 32px, -16px 32px;
           background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
    60%  { background-position: 120px 100px, 120px 100px, 24px 20px, 24px 20px;
           background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px; }
    80%  { background-position: -60px -80px, -60px -80px, -12px -16px, -12px -16px;
           background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0;
           background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
}


/* ================================================================
   9. MESH / DIAMOND DOTS
   ================================================================ */

#pattern-mesh .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* 9A. Mesh - Top to Bottom */
#pattern-mesh-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    animation: meshTopBottom 12s linear infinite;
}
@keyframes meshTopBottom {
    from { background-position: 0 0,    20px 20px; }
    to   { background-position: 0 40px, 20px 60px; }
}

/* 9B. Mesh - Left to Right */
#pattern-mesh-left-right .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    animation: meshLeftRight 12s linear infinite;
}
@keyframes meshLeftRight {
    from { background-position: 0 0,    20px 20px; }
    to   { background-position: 40px 0, 60px 20px; }
}

/* 9C. Mesh - Right to Left */
#pattern-mesh-right-left .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    animation: meshRightLeft 12s linear infinite;
}
@keyframes meshRightLeft {
    from { background-position: 40px 0, 60px 20px; }
    to   { background-position: 0 0,    20px 20px; }
}

/* 9D. Mesh - Zoom Out */
#pattern-mesh-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-position: 0 0, 20px 20px;
    animation: meshZoomOut 18s ease-out infinite;
}
@keyframes meshZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 9E. Mesh - Zoom Smooth */
#pattern-mesh-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-position: 0 0, 20px 20px;
    animation: meshZoomSmooth 25s linear infinite;
}
@keyframes meshZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 500px 500px; }
}

/* 9F. Mesh - Organic */
#pattern-mesh-mix .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 1.5px, transparent 1.5px),
                      radial-gradient(#ffffff1c 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    animation: meshOrganic 35s ease-in-out infinite alternate;
}
@keyframes meshOrganic {
    0%   { background-position: 0 0,          20px 20px;   background-size: 40px 40px; }
    20%  { background-position: 100px -80px,  120px -60px; background-size: 60px 60px; }
    40%  { background-position: -50px 110px,  -30px 130px; background-size: 25px 25px; }
    60%  { background-position: 80px 70px,    100px 90px;  background-size: 70px 70px; }
    80%  { background-position: -40px -50px,  -20px -30px; background-size: 50px 50px; }
    100% { background-position: 0 0,          20px 20px;   background-size: 40px 40px; }
}


/* ================================================================
   10. POLKA DOTS (LARGE)
   ================================================================ */

#pattern-polka .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-size: 40px 40px;
}

/* 10A. Polka - Top to Bottom */
#pattern-polka-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-size: 40px 40px;
    animation: polkaTopBottom 12s linear infinite;
}
@keyframes polkaTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 40px; }
}

/* 10B. Polka - Left to Right */
#pattern-polka-left-right .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-size: 40px 40px;
    animation: polkaLeftRight 12s linear infinite;
}
@keyframes polkaLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}

/* 10C. Polka - Right to Left */
#pattern-polka-right-left .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-size: 40px 40px;
    animation: polkaRightLeft 12s linear infinite;
}
@keyframes polkaRightLeft {
    from { background-position: 40px 0; }
    to   { background-position: 0 0; }
}

/* 10D. Polka - Zoom Out */
#pattern-polka-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-repeat: repeat;
    background-position: center;
    animation: polkaZoomOut 18s ease-out infinite;
}
@keyframes polkaZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 10E. Polka - Zoom Smooth */
#pattern-polka-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-size: 40px 40px;
    animation: polkaZoomSmooth 25s linear infinite;
}
@keyframes polkaZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 500px 500px; }
}

/* 10F. Polka - Organic */
#pattern-polka-mix .elementor-background-overlay {
    background-image: radial-gradient(#ffffff1c 5px, transparent 5px);
    background-size: 40px 40px;
    background-position: 0 0;
    animation: polkaOrganic 35s ease-in-out infinite alternate;
}
@keyframes polkaOrganic {
    0%   { background-position: 0 0;         background-size: 40px 40px; }
    20%  { background-position: 100px -80px; background-size: 60px 60px; }
    40%  { background-position: -60px 120px; background-size: 25px 25px; }
    60%  { background-position: 80px 80px;   background-size: 70px 70px; }
    80%  { background-position: -40px -60px; background-size: 50px 50px; }
    100% { background-position: 0 0;         background-size: 40px 40px; }
}


/* ================================================================
   11. PLUS SIGNS
   ================================================================ */

#pattern-plus .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    background-position: 0 0;
}

/* 11A. Plus - Top to Bottom */
#pattern-plus-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    animation: plusTopBottom 10s linear infinite;
}
@keyframes plusTopBottom {
    from { background-position: 0 0,    0 0; }
    to   { background-position: 0 20px, 0 20px; }
}

/* 11B. Plus - Left to Right */
#pattern-plus-left-right .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    animation: plusLeftRight 10s linear infinite;
}
@keyframes plusLeftRight {
    from { background-position: 0 0,    0 0; }
    to   { background-position: 20px 0, 20px 0; }
}

/* 11C. Plus - Right to Left */
#pattern-plus-right-left .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    animation: plusRightLeft 10s linear infinite;
}
@keyframes plusRightLeft {
    from { background-position: 20px 0, 20px 0; }
    to   { background-position: 0 0,    0 0; }
}

/* 11D. Plus - Zoom Out */
#pattern-plus-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    background-position: center;
    animation: plusZoomOut 18s ease-out infinite;
}
@keyframes plusZoomOut {
    0%   { background-size: 20px 2px,  2px 20px;  opacity: 0.6; }
    100% { background-size: 200px 20px, 20px 200px; opacity: 0.2; }
}

/* 11E. Plus - Zoom Smooth */
#pattern-plus-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    animation: plusZoomSmooth 25s linear infinite;
}
@keyframes plusZoomSmooth {
    0%   { background-size: 20px 2px,   2px 20px; }
    100% { background-size: 200px 20px, 20px 200px; }
}

/* 11F. Plus - Organic */
#pattern-plus-mix .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c, #ffffff1c),
                      linear-gradient(#ffffff1c, #ffffff1c);
    background-size: 20px 2px, 2px 20px;
    background-repeat: repeat;
    background-position: 0 0;
    animation: plusOrganic 35s ease-in-out infinite alternate;
}
@keyframes plusOrganic {
    0%   { background-position: 0 0;         background-size: 20px 2px,  2px 20px; }
    20%  { background-position: 80px -60px;  background-size: 30px 3px,  3px 30px; }
    40%  { background-position: -40px 80px;  background-size: 15px 1px,  1px 15px; }
    60%  { background-position: 60px 60px;   background-size: 35px 4px,  4px 35px; }
    80%  { background-position: -30px -40px; background-size: 25px 2px,  2px 25px; }
    100% { background-position: 0 0;         background-size: 20px 2px,  2px 20px; }
}


/* ================================================================
   12. TRIANGLES
   ================================================================ */

#pattern-triangles .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    background-size: 40px 40px;
}

/* 12A. Triangles - Top to Bottom */
#pattern-triangles-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    background-size: 40px 40px;
    animation: trianglesTopBottom 12s linear infinite;
}
@keyframes trianglesTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 40px; }
}

/* 12B. Triangles - Left to Right */
#pattern-triangles-left-right .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    background-size: 40px 40px;
    animation: trianglesLeftRight 12s linear infinite;
}
@keyframes trianglesLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}

/* 12C. Triangles - Right to Left */
#pattern-triangles-right-left .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    background-size: 40px 40px;
    animation: trianglesRightLeft 12s linear infinite;
}
@keyframes trianglesRightLeft {
    from { background-position: 40px 0; }
    to   { background-position: 0 0; }
}

/* 12D. Triangles - Zoom Out */
#pattern-triangles-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    animation: trianglesZoomOut 18s ease-out infinite;
}
@keyframes trianglesZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 12E. Triangles - Zoom Smooth */
#pattern-triangles-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    animation: trianglesZoomSmooth 25s linear infinite;
}
@keyframes trianglesZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 500px 500px; }
}

/* 12F. Triangles - Organic */
#pattern-triangles-mix .elementor-background-overlay {
    background-image: linear-gradient(45deg,  #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(-45deg, #ffffff1c 25%, transparent 25.5%),
                      linear-gradient(45deg,  transparent 75%, #ffffff1c 75.5%),
                      linear-gradient(-45deg, transparent 75%, #ffffff1c 75.5%);
    background-size: 40px 40px;
    animation: trianglesOrganic 35s ease-in-out infinite alternate;
}
@keyframes trianglesOrganic {
    0%   { background-position: 0 0;         background-size: 40px 40px; }
    20%  { background-position: 100px -80px; background-size: 60px 60px; }
    40%  { background-position: -60px 110px; background-size: 25px 25px; }
    60%  { background-position: 80px 70px;   background-size: 70px 70px; }
    80%  { background-position: -40px -50px; background-size: 50px 50px; }
    100% { background-position: 0 0;         background-size: 40px 40px; }
}


/* ================================================================
   13. HORIZONTAL STRIPES
   ================================================================ */

#pattern-stripes-h .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    background-size: 100% 30px;
}

/* 13A. H.Stripes - Top to Bottom */
#pattern-stripes-h-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    background-size: 100% 30px;
    animation: stripesHTopBottom 8s linear infinite;
}
@keyframes stripesHTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 30px; }
}

/* 13B. H.Stripes - Left to Right */
#pattern-stripes-h-left-right .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    background-size: 100% 30px;
    animation: stripesHLeftRight 14s linear infinite;
}
@keyframes stripesHLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 100px 0; }
}

/* 13C. H.Stripes - Right to Left */
#pattern-stripes-h-right-left .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    background-size: 100% 30px;
    animation: stripesHRightLeft 14s linear infinite;
}
@keyframes stripesHRightLeft {
    from { background-position: 100px 0; }
    to   { background-position: 0 0; }
}

/* 13D. H.Stripes - Zoom Out */
#pattern-stripes-h-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    animation: stripesHZoomOut 18s ease-out infinite;
}
@keyframes stripesHZoomOut {
    0%   { background-size: 100% 30px;  opacity: 0.6; }
    100% { background-size: 100% 300px; opacity: 0.2; }
}

/* 13E. H.Stripes - Zoom Smooth */
#pattern-stripes-h-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    animation: stripesHZoomSmooth 25s linear infinite;
}
@keyframes stripesHZoomSmooth {
    0%   { background-size: 100% 30px; }
    100% { background-size: 100% 400px; }
}

/* 13F. H.Stripes - Organic */
#pattern-stripes-h-mix .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 2px, transparent 2px);
    background-size: 100% 30px;
    animation: stripesHOrganic 35s ease-in-out infinite alternate;
}
@keyframes stripesHOrganic {
    0%   { background-position: 0 0;     background-size: 100% 30px; }
    20%  { background-position: 0 -60px; background-size: 100% 50px; }
    40%  { background-position: 0 90px;  background-size: 100% 20px; }
    60%  { background-position: 0 40px;  background-size: 100% 60px; }
    80%  { background-position: 0 -30px; background-size: 100% 35px; }
    100% { background-position: 0 0;     background-size: 100% 30px; }
}


/* ================================================================
   14. VERTICAL STRIPES
   ================================================================ */

#pattern-stripes-v .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    background-size: 30px 100%;
}

/* 14A. V.Stripes - Top to Bottom */
#pattern-stripes-v-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    background-size: 30px 100%;
    animation: stripesVTopBottom 14s linear infinite;
}
@keyframes stripesVTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 100px; }
}

/* 14B. V.Stripes - Left to Right */
#pattern-stripes-v-left-right .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    background-size: 30px 100%;
    animation: stripesVLeftRight 8s linear infinite;
}
@keyframes stripesVLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 30px 0; }
}

/* 14C. V.Stripes - Right to Left */
#pattern-stripes-v-right-left .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    background-size: 30px 100%;
    animation: stripesVRightLeft 8s linear infinite;
}
@keyframes stripesVRightLeft {
    from { background-position: 30px 0; }
    to   { background-position: 0 0; }
}

/* 14D. V.Stripes - Zoom Out */
#pattern-stripes-v-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    animation: stripesVZoomOut 18s ease-out infinite;
}
@keyframes stripesVZoomOut {
    0%   { background-size: 30px 100%;  opacity: 0.6; }
    100% { background-size: 300px 100%; opacity: 0.2; }
}

/* 14E. V.Stripes - Zoom Smooth */
#pattern-stripes-v-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    animation: stripesVZoomSmooth 25s linear infinite;
}
@keyframes stripesVZoomSmooth {
    0%   { background-size: 30px 100%; }
    100% { background-size: 400px 100%; }
}

/* 14F. V.Stripes - Organic */
#pattern-stripes-v-mix .elementor-background-overlay {
    background-image: linear-gradient(90deg, #ffffff1c 2px, transparent 2px);
    background-size: 30px 100%;
    animation: stripesVOrganic 35s ease-in-out infinite alternate;
}
@keyframes stripesVOrganic {
    0%   { background-position: 0 0;     background-size: 30px 100%; }
    20%  { background-position: -60px 0; background-size: 50px 100%; }
    40%  { background-position: 80px 0;  background-size: 20px 100%; }
    60%  { background-position: 40px 0;  background-size: 60px 100%; }
    80%  { background-position: -30px 0; background-size: 35px 100%; }
    100% { background-position: 0 0;     background-size: 30px 100%; }
}


/* ================================================================
   15. BRICK WALL
   ================================================================ */

#pattern-bricks .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

/* 15A. Bricks - Top to Bottom */
#pattern-bricks-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-size: 58px 58px;
    animation: bricksTopBottom 14s linear infinite;
}
@keyframes bricksTopBottom {
    from { background-position: 0px 2px,  4px 35px,  29px 31px, 34px 6px; }
    to   { background-position: 0px 60px, 4px 93px,  29px 89px, 34px 64px; }
}

/* 15B. Bricks - Left to Right */
#pattern-bricks-left-right .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-size: 58px 58px;
    animation: bricksLeftRight 14s linear infinite;
}
@keyframes bricksLeftRight {
    from { background-position: 0px 2px,  4px 35px,  29px 31px, 34px 6px; }
    to   { background-position: 58px 2px, 62px 35px, 87px 31px, 92px 6px; }
}

/* 15C. Bricks - Right to Left */
#pattern-bricks-right-left .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-size: 58px 58px;
    animation: bricksRightLeft 14s linear infinite;
}
@keyframes bricksRightLeft {
    from { background-position: 58px 2px, 62px 35px, 87px 31px, 92px 6px; }
    to   { background-position: 0px 2px,  4px 35px,  29px 31px, 34px 6px; }
}

/* 15D. Bricks - Zoom Out */
#pattern-bricks-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
    animation: bricksZoomOut 18s ease-out infinite;
}
@keyframes bricksZoomOut {
    0%   { background-size: 58px 58px;   opacity: 0.6; }
    100% { background-size: 580px 580px; opacity: 0.2; }
}

/* 15E. Bricks - Zoom Smooth */
#pattern-bricks-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
    animation: bricksZoomSmooth 25s linear infinite;
}
@keyframes bricksZoomSmooth {
    0%   { background-size: 58px 58px; }
    100% { background-size: 580px 580px; }
}

/* 15F. Bricks - Organic */
#pattern-bricks-mix .elementor-background-overlay {
    background-image: linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(335deg, #ffffff12 23px, transparent 23px),
                      linear-gradient(155deg, #ffffff12 23px, transparent 23px);
    background-size: 58px 58px;
    animation: bricksOrganic 35s ease-in-out infinite alternate;
}
@keyframes bricksOrganic {
    0%   { background-position: 0px 2px,   4px 35px,   29px 31px,   34px 6px;    background-size: 58px 58px; }
    20%  { background-position: 100px 60px, 104px 93px, 129px 89px, 134px 64px;  background-size: 80px 80px; }
    40%  { background-position: -50px 120px,-46px 153px,-21px 149px, -16px 124px; background-size: 40px 40px; }
    60%  { background-position: 80px 80px,  84px 113px, 109px 109px, 114px 84px; background-size: 90px 90px; }
    80%  { background-position: -30px -40px,-26px -7px,  -1px -11px,   4px -34px; background-size: 70px 70px; }
    100% { background-position: 0px 2px,   4px 35px,   29px 31px,   34px 6px;    background-size: 58px 58px; }
}


/* ================================================================
   16. CONCENTRIC CIRCLES
   ================================================================ */

#pattern-circles .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-size: 50px 50px;
}

/* 16A. Circles - Top to Bottom */
#pattern-circles-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-size: 50px 50px;
    animation: circlesTopBottom 12s linear infinite;
}
@keyframes circlesTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 50px; }
}

/* 16B. Circles - Left to Right */
#pattern-circles-left-right .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-size: 50px 50px;
    animation: circlesLeftRight 12s linear infinite;
}
@keyframes circlesLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 50px 0; }
}

/* 16C. Circles - Right to Left */
#pattern-circles-right-left .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-size: 50px 50px;
    animation: circlesRightLeft 12s linear infinite;
}
@keyframes circlesRightLeft {
    from { background-position: 50px 0; }
    to   { background-position: 0 0; }
}

/* 16D. Circles - Zoom Out */
#pattern-circles-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-repeat: repeat;
    background-position: center;
    animation: circlesZoomOut 18s ease-out infinite;
}
@keyframes circlesZoomOut {
    0%   { background-size: 50px 50px;   opacity: 0.6; }
    100% { background-size: 500px 500px; opacity: 0.2; }
}

/* 16E. Circles - Zoom Smooth */
#pattern-circles-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-size: 50px 50px;
    animation: circlesZoomSmooth 25s linear infinite;
}
@keyframes circlesZoomSmooth {
    0%   { background-size: 50px 50px; }
    100% { background-size: 600px 600px; }
}

/* 16F. Circles - Organic */
#pattern-circles-mix .elementor-background-overlay {
    background-image: radial-gradient(circle, transparent 15px, #ffffff0a 16px, #ffffff0a 18px, transparent 19px);
    background-size: 50px 50px;
    animation: circlesOrganic 35s ease-in-out infinite alternate;
}
@keyframes circlesOrganic {
    0%   { background-position: 0 0;          background-size: 50px 50px; }
    20%  { background-position: 120px -100px; background-size: 75px 75px; }
    40%  { background-position: -70px 130px;  background-size: 35px 35px; }
    60%  { background-position: 90px 80px;    background-size: 80px 80px; }
    80%  { background-position: -50px -70px;  background-size: 60px 60px; }
    100% { background-position: 0 0;          background-size: 50px 50px; }
}


/* ================================================================
   17. DIAMOND SHAPES
   ================================================================ */

#pattern-diamonds .elementor-background-overlay {
    background: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* 17A. Diamonds - Top to Bottom */
#pattern-diamonds-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                      linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-size: 40px 40px;
    animation: diamondsTopBottom 12s linear infinite;
}
@keyframes diamondsTopBottom {
    from { background-position: 0 0,    20px 20px; }
    to   { background-position: 0 40px, 20px 60px; }
}

/* 17B. Diamonds - Left to Right */
#pattern-diamonds-left-right .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                      linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-size: 40px 40px;
    animation: diamondsLeftRight 12s linear infinite;
}
@keyframes diamondsLeftRight {
    from { background-position: 0 0,    20px 20px; }
    to   { background-position: 40px 0, 60px 20px; }
}

/* 17C. Diamonds - Right to Left */
#pattern-diamonds-right-left .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                      linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-size: 40px 40px;
    animation: diamondsRightLeft 12s linear infinite;
}
@keyframes diamondsRightLeft {
    from { background-position: 40px 0, 60px 20px; }
    to   { background-position: 0 0,    20px 20px; }
}

/* 17D. Diamonds - Zoom Out */
#pattern-diamonds-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                      linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-position: 0 0, 20px 20px;
    animation: diamondsZoomOut 18s ease-out infinite;
}
@keyframes diamondsZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 17E. Diamonds - Zoom Smooth */
#pattern-diamonds-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                      linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-position: 0 0, 20px 20px;
    animation: diamondsZoomSmooth 25s linear infinite;
}
@keyframes diamondsZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 500px 500px; }
}

/* 17F. Diamonds - Organic */
#pattern-diamonds-mix .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c),
                      linear-gradient(45deg, #ffffff1c 25%, transparent 25%, transparent 75%, #ffffff1c 75%, #ffffff1c);
    background-size: 40px 40px;
    animation: diamondsOrganic 35s ease-in-out infinite alternate;
}
@keyframes diamondsOrganic {
    0%   { background-position: 0 0,          20px 20px;   background-size: 40px 40px; }
    20%  { background-position: 100px -80px,  120px -60px; background-size: 60px 60px; }
    40%  { background-position: -50px 110px,  -30px 130px; background-size: 25px 25px; }
    60%  { background-position: 80px 70px,    100px 90px;  background-size: 70px 70px; }
    80%  { background-position: -40px -50px,  -20px -30px; background-size: 50px 50px; }
    100% { background-position: 0 0,          20px 20px;   background-size: 40px 40px; }
}


/* ================================================================
   18. MICRO GRID
   ================================================================ */

#pattern-microgrid .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    background-size: 10px 10px;
}

/* 18A. Microgrid - Top to Bottom */
#pattern-microgrid-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    animation: microgridTopBottom 8s linear infinite;
}
@keyframes microgridTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 10px; }
}

/* 18B. Microgrid - Left to Right */
#pattern-microgrid-left-right .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    animation: microgridLeftRight 8s linear infinite;
}
@keyframes microgridLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 10px 0; }
}

/* 18C. Microgrid - Right to Left */
#pattern-microgrid-right-left .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    animation: microgridRightLeft 8s linear infinite;
}
@keyframes microgridRightLeft {
    from { background-position: 10px 0; }
    to   { background-position: 0 0; }
}

/* 18D. Microgrid - Zoom Out */
#pattern-microgrid-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    animation: microgridZoomOut 18s ease-out infinite;
}
@keyframes microgridZoomOut {
    0%   { background-size: 10px 10px;   opacity: 0.6; }
    100% { background-size: 200px 200px; opacity: 0.2; }
}

/* 18E. Microgrid - Zoom Smooth */
#pattern-microgrid-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    animation: microgridZoomSmooth 25s linear infinite;
}
@keyframes microgridZoomSmooth {
    0%   { background-size: 10px 10px; }
    100% { background-size: 300px 300px; }
}

/* 18F. Microgrid - Organic */
#pattern-microgrid-mix .elementor-background-overlay {
    background-image: linear-gradient(#ffffff1c 0.5px, transparent 0.5px),
                      linear-gradient(90deg, #ffffff1c 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    animation: microgridOrganic 35s ease-in-out infinite alternate;
}
@keyframes microgridOrganic {
    0%   { background-position: 0 0;         background-size: 10px 10px; }
    20%  { background-position: 40px -30px;  background-size: 18px 18px; }
    40%  { background-position: -20px 50px;  background-size: 6px 6px; }
    60%  { background-position: 30px 30px;   background-size: 22px 22px; }
    80%  { background-position: -15px -20px; background-size: 14px 14px; }
    100% { background-position: 0 0;         background-size: 10px 10px; }
}


/* ================================================================
   19. STAR / SPARKLE DOTS
   ================================================================ */

#pattern-sparkle .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 100px 100px, 60px 60px;
    background-position: 0 0, 50px 50px;
}

/* 19A. Sparkle - Top to Bottom */
#pattern-sparkle-top-bottom .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 100px 100px, 60px 60px;
    animation: sparkleTopBottom 14s linear infinite;
}
@keyframes sparkleTopBottom {
    from { background-position: 0 0,      50px 50px; }
    to   { background-position: 0 100px,  50px 150px; }
}

/* 19B. Sparkle - Left to Right */
#pattern-sparkle-left-right .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 100px 100px, 60px 60px;
    animation: sparkleLeftRight 14s linear infinite;
}
@keyframes sparkleLeftRight {
    from { background-position: 0 0,      50px 50px; }
    to   { background-position: 100px 0,  150px 50px; }
}

/* 19C. Sparkle - Right to Left */
#pattern-sparkle-right-left .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 100px 100px, 60px 60px;
    animation: sparkleRightLeft 14s linear infinite;
}
@keyframes sparkleRightLeft {
    from { background-position: 100px 0,  150px 50px; }
    to   { background-position: 0 0,      50px 50px; }
}

/* 19D. Sparkle - Zoom Out */
#pattern-sparkle-zoom-out .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-position: 0 0, 50px 50px;
    animation: sparkleZoomOut 18s ease-out infinite;
}
@keyframes sparkleZoomOut {
    0%   { background-size: 100px 100px,  60px 60px;   opacity: 0.6; }
    100% { background-size: 800px 800px,  480px 480px; opacity: 0.2; }
}

/* 19E. Sparkle - Zoom Smooth */
#pattern-sparkle-zoom-out-2 .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-position: 0 0, 50px 50px;
    animation: sparkleZoomSmooth 25s linear infinite;
}
@keyframes sparkleZoomSmooth {
    0%   { background-size: 100px 100px, 60px 60px; }
    100% { background-size: 800px 800px, 480px 480px; }
}

/* 19F. Sparkle - Organic */
#pattern-sparkle-mix .elementor-background-overlay {
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 100px 100px, 60px 60px;
    animation: sparkleOrganic 35s ease-in-out infinite alternate;
}
@keyframes sparkleOrganic {
    0%   { background-position: 0 0,           50px 50px;   background-size: 100px 100px, 60px 60px; }
    20%  { background-position: 150px -120px,  200px -70px; background-size: 140px 140px, 84px 84px; }
    40%  { background-position: -80px 180px,   -30px 230px; background-size: 70px 70px,   42px 42px; }
    60%  { background-position: 120px 100px,   170px 150px; background-size: 150px 150px, 90px 90px; }
    80%  { background-position: -60px -80px,   -10px -30px; background-size: 110px 110px, 66px 66px; }
    100% { background-position: 0 0,           50px 50px;   background-size: 100px 100px, 60px 60px; }
}


/* ================================================================
   20. SLANTED PLAID
   ================================================================ */

#pattern-plaid .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
}

/* 20A. Plaid - Top to Bottom */
#pattern-plaid-top-bottom .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
    animation: plaidTopBottom 10s linear infinite;
}
@keyframes plaidTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 40px; }
}

/* 20B. Plaid - Left to Right */
#pattern-plaid-left-right .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
    animation: plaidLeftRight 10s linear infinite;
}
@keyframes plaidLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}

/* 20C. Plaid - Right to Left */
#pattern-plaid-right-left .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
    animation: plaidRightLeft 10s linear infinite;
}
@keyframes plaidRightLeft {
    from { background-position: 40px 0; }
    to   { background-position: 0 0; }
}

/* 20D. Plaid - Zoom Out */
#pattern-plaid-zoom-out .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
    animation: plaidZoomOut 18s ease-out infinite;
}
@keyframes plaidZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 20E. Plaid - Zoom Smooth */
#pattern-plaid-zoom-out-2 .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
    animation: plaidZoomSmooth 25s linear infinite;
}
@keyframes plaidZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 400px 400px; }
}

/* 20F. Plaid - Organic */
#pattern-plaid-mix .elementor-background-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px);
    background-size: 40px 40px;
    animation: plaidOrganic 35s ease-in-out infinite alternate;
}
@keyframes plaidOrganic {
    0%   { background-position: 0 0;         background-size: 40px 40px; }
    20%  { background-position: 100px -80px; background-size: 60px 60px; }
    40%  { background-position: -50px 110px; background-size: 25px 25px; }
    60%  { background-position: 80px 70px;   background-size: 70px 70px; }
    80%  { background-position: -40px -50px; background-size: 50px 50px; }
    100% { background-position: 0 0;         background-size: 40px 40px; }
}


/* ================================================================
   21. WOVEN
   ================================================================ */

#pattern-woven .elementor-background-overlay {
    background:
        linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a) 0 0,
        linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a) 20px 20px,
        linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a) 40px 40px;
    background-size: 40px 40px;
}

/* 21A. Woven - Top to Bottom */
#pattern-woven-top-bottom .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a);
    background-size: 40px 40px;
    animation: wovenTopBottom 12s linear infinite;
}
@keyframes wovenTopBottom {
    from { background-position: 0 0,    20px 20px,  40px 40px; }
    to   { background-position: 0 40px, 20px 60px,  40px 80px; }
}

/* 21B. Woven - Left to Right */
#pattern-woven-left-right .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a);
    background-size: 40px 40px;
    animation: wovenLeftRight 12s linear infinite;
}
@keyframes wovenLeftRight {
    from { background-position: 0 0,    20px 20px,  40px 40px; }
    to   { background-position: 40px 0, 60px 20px,  80px 40px; }
}

/* 21C. Woven - Right to Left */
#pattern-woven-right-left .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a);
    background-size: 40px 40px;
    animation: wovenRightLeft 12s linear infinite;
}
@keyframes wovenRightLeft {
    from { background-position: 40px 0, 60px 20px,  80px 40px; }
    to   { background-position: 0 0,    20px 20px,  40px 40px; }
}

/* 21D. Woven - Zoom Out */
#pattern-woven-zoom-out .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a);
    background-position: 0 0, 20px 20px, 40px 40px;
    animation: wovenZoomOut 18s ease-out infinite;
}
@keyframes wovenZoomOut {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 21E. Woven - Zoom Smooth */
#pattern-woven-zoom-out-2 .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a);
    background-position: 0 0, 20px 20px, 40px 40px;
    animation: wovenZoomSmooth 25s linear infinite;
}
@keyframes wovenZoomSmooth {
    0%   { background-size: 40px 40px; }
    100% { background-size: 500px 500px; }
}

/* 21F. Woven - Organic */
#pattern-woven-mix .elementor-background-overlay {
    background-image: linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a),
                      linear-gradient(45deg, #ffffff0a 25%, transparent 25%, transparent 75%, #ffffff0a 75%, #ffffff0a);
    background-size: 40px 40px;
    animation: wovenOrganic 35s ease-in-out infinite alternate;
}
@keyframes wovenOrganic {
    0%   { background-position: 0 0,          20px 20px,   40px 40px;   background-size: 40px 40px; }
    20%  { background-position: 100px -80px,  120px -60px, 140px -40px; background-size: 60px 60px; }
    40%  { background-position: -50px 110px,  -30px 130px, -10px 150px; background-size: 25px 25px; }
    60%  { background-position: 80px 70px,    100px 90px,  120px 110px; background-size: 70px 70px; }
    80%  { background-position: -40px -50px,  -20px -30px,  0px -10px;  background-size: 50px 50px; }
    100% { background-position: 0 0,          20px 20px,   40px 40px;   background-size: 40px 40px; }
}


/* ================================================================
   22. BUBBLING DRINK (ORGANIC CIRCLES)
   ================================================================ */

#pattern-bubbles-alt .elementor-background-overlay {
    background-image:
        radial-gradient(circle at 10% 20%, #ffffff3b 4px, transparent 0),
        radial-gradient(circle at 90% 80%, #ffffff3b 8px, transparent 0);
    background-size: 60px 60px;
}

/* 22A. Bubbles - Top to Bottom */
#pattern-bubbles-alt-top-bottom .elementor-background-overlay {
    background-image:
        radial-gradient(circle at 10% 20%, #ffffff3b 4px, transparent 0),
        radial-gradient(circle at 90% 80%, #ffffff3b 8px, transparent 0);
    background-size: 60px 60px;
    animation: bubblesTopBottom 12s linear infinite;
}
@keyframes bubblesTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 200px; }
}

/* 22B. Bubbles - Left to Right */
#pattern-bubbles-alt-left-right .elementor-background-overlay {
    background-image:
        radial-gradient(circle at 10% 20%, #ffffff3b 4px, transparent 0),
        radial-gradient(circle at 90% 80%, #ffffff3b 8px, transparent 0);
    background-size: 60px 60px;
    animation: bubblesLeftRight 14s linear infinite;
}
@keyframes bubblesLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 200px 0; }
}

/* 22C. Bubbles - Right to Left */
#pattern-bubbles-alt-right-left .elementor-background-overlay {
    background-image:
        radial-gradient(circle at 10% 20%, #ffffff3b 4px, transparent 0),
        radial-gradient(circle at 90% 80%, #ffffff3b 8px, transparent 0);
    background-size: 60px 60px;
    animation: bubblesRightLeft 14s linear infinite;
}
@keyframes bubblesRightLeft {
    from { background-position: 200px 0; }
    to   { background-position: 0 0; }
}

/* 22D. Bubbles - Zoom Out */
#pattern-bubbles-alt-zoom-out .elementor-background-overlay {
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,0.35) 6px, transparent 7px);
    background-repeat: repeat;
    background-position: center;
    background-size: 40px 40px;
    animation: bubblesCenterEmit 18s ease-out infinite;
}
@keyframes bubblesCenterEmit {
    0%   { background-size: 40px 40px;   opacity: 0.6; }
    100% { background-size: 400px 400px; opacity: 0.2; }
}

/* 22E. Bubbles - Zoom Smooth */
#pattern-bubbles-alt-zoom-out-2 .elementor-background-overlay {
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,0.4)  4px, transparent 5px),
        radial-gradient(circle at center, rgba(255,255,255,0.25) 8px, transparent 9px);
    background-position: center;
    background-repeat: repeat;
    background-size: 60px 60px;
    animation: bubblesCenterSmooth 25s linear infinite;
}
@keyframes bubblesCenterSmooth {
    0%   { background-size: 60px 60px; }
    100% { background-size: 500px 500px; }
}

/* 22F. Bubbles - Organic */
#pattern-bubbles-alt-mix .elementor-background-overlay {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 4px,  transparent 5px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.25) 7px,  transparent 8px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.20) 10px, transparent 11px);
    background-repeat: repeat;
    background-size: 80px 80px;
    background-position: 0 0;
    animation: bubblesOrganic 35s ease-in-out infinite alternate;
}
@keyframes bubblesOrganic {
    0%   { background-position: 0 0;          background-size: 80px 80px; }
    20%  { background-position: 100px -150px; background-size: 100px 100px; }
    40%  { background-position: -120px 200px; background-size: 70px 70px; }
    60%  { background-position: 150px 100px;  background-size: 110px 110px; }
    80%  { background-position: -80px -120px; background-size: 90px 90px; }
    100% { background-position: 0 0;          background-size: 80px 80px; }
}


/* ================================================================
   23. GINGHAM
   ================================================================ */

#pattern-gingham .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    background-size: 80px 80px;
}

/* 23A. Gingham - Top to Bottom */
#pattern-gingham-top-bottom .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    background-size: 80px 80px;
    animation: ginghamTopBottom 12s linear infinite;
}
@keyframes ginghamTopBottom {
    from { background-position: 0 0; }
    to   { background-position: 0 80px; }
}

/* 23B. Gingham - Left to Right */
#pattern-gingham-left-right .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    background-size: 80px 80px;
    animation: ginghamLeftRight 12s linear infinite;
}
@keyframes ginghamLeftRight {
    from { background-position: 0 0; }
    to   { background-position: 80px 0; }
}

/* 23C. Gingham - Right to Left */
#pattern-gingham-right-left .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    background-size: 80px 80px;
    animation: ginghamRightLeft 12s linear infinite;
}
@keyframes ginghamRightLeft {
    from { background-position: 80px 0; }
    to   { background-position: 0 0; }
}

/* 23D. Gingham - Zoom Out */
#pattern-gingham-zoom-out .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    animation: ginghamZoomOut 18s ease-out infinite;
}
@keyframes ginghamZoomOut {
    0%   { background-size: 80px 80px;   opacity: 0.6; }
    100% { background-size: 800px 800px; opacity: 0.2; }
}

/* 23E. Gingham - Zoom Smooth */
#pattern-gingham-zoom-out-2 .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    animation: ginghamZoomSmooth 25s linear infinite;
}
@keyframes ginghamZoomSmooth {
    0%   { background-size: 80px 80px; }
    100% { background-size: 800px 800px; }
}

/* 23F. Gingham - Organic */
#pattern-gingham-mix .elementor-background-overlay {
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%);
    background-size: 80px 80px;
    background-position: 0 0;
    animation: ginghamOrganic 35s ease-in-out infinite alternate;
}
@keyframes ginghamOrganic {
    0%   { background-position: 0 0;          background-size: 80px 80px; }
    20%  { background-position: 150px -120px; background-size: 110px 110px; }
    40%  { background-position: -80px 160px;  background-size: 55px 55px; }
    60%  { background-position: 120px 100px;  background-size: 130px 130px; }
    80%  { background-position: -60px -80px;  background-size: 90px 90px; }
    100% { background-position: 0 0;          background-size: 80px 80px; }
}