.computer-monitors-container{display:flex;flex-wrap:wrap;align-items:center;position:relative}.computer-monitor{position:relative;display:flex;flex-direction:column;align-items:center;transition:all 0.5s ease}.computer-monitors-container.effect-3d{flex-wrap:nowrap;position:relative;min-height:550px;display:flex;align-items:center;width:100%;margin:0 auto}.computer-monitors-container.effect-3d .computer-monitor{cursor:pointer;position:absolute;left:50%;top:50%;transition:all 0.6s ease;pointer-events:auto!important}.computer-monitors-container.effect-3d .computer-monitor-1{transform:translateX(calc(-180% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important;z-index:1}.computer-monitors-container.effect-3d .computer-monitor-2{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important;z-index:5}.computer-monitors-container.effect-3d .computer-monitor-3{transform:translateX(calc(80% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important;z-index:1}@media (min-width:1025px){.computer-monitors-container.effect-3d .computer-monitor-1:hover{transform:translateX(calc(-180% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(calc(var(--side-scale, 0.75) * 1.0625));opacity:calc(var(--side-opacity, 0.6) + 0.2)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2:hover{transform:translateX(-50%) translateY(-50%) scale(calc(var(--center-scale, 1.15) * 1.026));filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3:hover{transform:translateX(calc(80% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(calc(var(--side-scale, 0.75) * 1.0625));opacity:calc(var(--side-opacity, 0.6) + 0.2)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}}.monitor-frame{position:relative!important;width:100%!important;height:100%!important;background-image:url(/wp-content/themes/synergin-theme/assets/images/computer-monitor.png)!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;padding:5% 3% 25% 3%!important}.monitor-frame::before{display:none!important}.monitor-frame::after{display:none!important}.monitor-screen{position:relative!important;width:100%!important;height:100%!important;background:#000000!important;border-radius:4px!important;overflow:hidden!important;box-shadow:inset 0 0 5px rgb(0 0 0 / .3)!important;display:flex!important;align-items:center!important;justify-content:center!important}.video-player{position:relative!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;overflow:hidden!important}.computer-monitor-1 .video-player,.computer-monitor-3 .video-player{cursor:default!important}.computer-monitor-1 .play-button,.computer-monitor-3 .play-button{cursor:default!important;opacity:.6}.video-poster{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform 0.3s ease}.video-player:hover .video-poster{transform:scale(1.05)}.computer-monitor-1 .video-player:hover .video-poster,.computer-monitor-3 .video-player:hover .video-poster{transform:scale(1)}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background-color:rgb(0 0 0 / .7);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;z-index:2}.play-button:hover{background-color:rgb(0 0 0 / .9);transform:translate(-50%,-50%) scale(1.1)}.computer-monitor-1 .play-button:hover,.computer-monitor-3 .play-button:hover{background-color:rgb(0 0 0 / .7);transform:translate(-50%,-50%) scale(1)}.play-button svg{width:60px;height:60px;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .3))}.video-player iframe,.video-player video{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;border:none!important;border-radius:4px!important}.video-player.loading::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:3px solid rgb(255 255 255 / .3);border-top:3px solid #fff;border-radius:50%;animation:spin 1s linear infinite;z-index:3}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}@media (max-width:1024px){.monitor-frame{padding:4% 2% 20% 2%!important}.play-button{width:50px;height:50px}.play-button svg{width:50px;height:50px}}@media (max-width:768px){.monitor-frame{padding:3% 1.5% 18% 1.5%!important}.play-button{width:45px;height:45px}.play-button svg{width:45px;height:45px}}@media (max-width:480px){.monitor-frame{padding:2% 1% 15% 1%!important}.monitor-screen{border-radius:3px!important}.play-button{width:40px;height:40px}.play-button svg{width:40px;height:40px}}.computer-monitors-container.effect-3d .computer-monitor-2{filter:blur(0) brightness(1)!important;opacity:1!important}.computer-monitors-container.effect-3d .computer-monitor-1,.computer-monitors-container.effect-3d .computer-monitor-3{animation:fadeInSliderSide 0.8s ease forwards}.computer-monitors-container.effect-3d .computer-monitor-2{animation:fadeInSliderCenter 0.8s ease forwards}.computer-monitors-container.effect-3d .computer-monitor-1{animation-delay:0.1s}.computer-monitors-container.effect-3d .computer-monitor-2{animation-delay:0.3s}.computer-monitors-container.effect-3d .computer-monitor-3{animation-delay:0.5s}@keyframes fadeInSliderSide{from{opacity:0;filter:blur(10px) brightness(.5)}to{opacity:var(--side-opacity,.6);filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))}}@keyframes fadeInSliderCenter{from{opacity:0;filter:blur(10px) brightness(.5)}to{opacity:1;filter:blur(0) brightness(1)}}.monitor-screen::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);transition:left 0.5s ease;z-index:1}.computer-monitor:hover .monitor-screen::before{left:100%}@media (max-width:1024px) and (min-width:769px){.computer-monitors-container.effect-3d{min-height:420px;margin:0 auto;width:100%}.computer-monitors-container.effect-3d .computer-monitor-1{transform:translateX(calc(-145% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3{transform:translateX(calc(45% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-1:hover,.computer-monitors-container.effect-3d .computer-monitor-1:active{transform:translateX(calc(-145% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2:hover,.computer-monitors-container.effect-3d .computer-monitor-2:active{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3:hover,.computer-monitors-container.effect-3d .computer-monitor-3:active{transform:translateX(calc(45% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}}@media (max-width:768px) and (min-width:481px){.computer-monitors-container.effect-3d{min-height:350px;margin:0 auto;width:100%}.computer-monitors-container.effect-3d .computer-monitor-1{transform:translateX(calc(-130% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3{transform:translateX(calc(30% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-1:hover,.computer-monitors-container.effect-3d .computer-monitor-1:active{transform:translateX(calc(-130% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2:hover,.computer-monitors-container.effect-3d .computer-monitor-2:active{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3:hover,.computer-monitors-container.effect-3d .computer-monitor-3:active{transform:translateX(calc(30% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}}@media (max-width:480px){.computer-monitors-container.effect-3d{min-height:280px;margin:0 auto;width:100%}.computer-monitors-container.effect-3d .computer-monitor-1{transform:translateX(calc(-105% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3{transform:translateX(calc(5% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-1:hover,.computer-monitors-container.effect-3d .computer-monitor-1:active{transform:translateX(calc(-105% - var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(var(--side-rotation,0deg)) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}.computer-monitors-container.effect-3d .computer-monitor-2:hover,.computer-monitors-container.effect-3d .computer-monitor-2:active{transform:translateX(-50%) translateY(-50%) scale(var(--center-scale,1.15));opacity:1!important;filter:blur(0) brightness(1)!important}.computer-monitors-container.effect-3d .computer-monitor-3:hover,.computer-monitors-container.effect-3d .computer-monitor-3:active{transform:translateX(calc(5% + var(--side-gap, 0%))) translateY(-50%) translateZ(var(--side-depth,-200px)) rotateY(calc(-1 * var(--side-rotation, 0deg))) scale(var(--side-scale,.75));opacity:var(--side-opacity,.6)!important;filter:blur(var(--side-blur,0)) brightness(var(--side-brightness,1))!important}}.computer-monitors-pagination{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-top:2rem;padding:0 1rem;z-index:10;position:relative}.computer-monitors-pagination-bullet{width:12px;height:12px;border-radius:50%;background-color:rgb(0 0 0 / .3);border:2px solid rgb(0 0 0 / .2);cursor:pointer;transition:all 0.3s ease;position:relative}.computer-monitors-pagination-bullet:hover{background-color:rgb(0 0 0 / .5);transform:scale(1.2)}.computer-monitors-pagination-bullet.active{background-color:rgb(0 0 0 / .8);border-color:rgb(0 0 0 / .6);transform:scale(1.3);box-shadow:0 0 8px rgb(0 0 0 / .3)}.computer-monitors-container.effect-3d+.computer-monitors-pagination{display:flex}.computer-monitors-container:not(.effect-3d)+.computer-monitors-pagination{display:none}@media (max-width:768px){.computer-monitors-pagination{margin-top:1.5rem;gap:.5rem}.computer-monitors-pagination-bullet{width:10px;height:10px}.computer-monitors-pagination-bullet.active{transform:scale(1.2)}}@media (max-width:480px){.computer-monitors-pagination{margin-top:1rem;gap:.4rem}.computer-monitors-pagination-bullet{width:8px;height:8px}.computer-monitors-pagination-bullet.active{transform:scale(1.15)}}@media (prefers-reduced-motion:reduce){.computer-monitor,.video-poster,.play-button,.monitor-screen::before,.computer-monitors-pagination-bullet{transition:none!important;animation:none!important}}