body {
    background-image: url('/static/img/customers/back-total-research.png');
}


@media (max-width: 1023px) {
    body {
        background-image: url('/static/img/customers/medium-back-total-research.png');
    }
}

@media (max-width: 450px) {
    body {
        background-image: url('/static/img/customers/small-back-total-research.png');
    }
}



.capture-one-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/static/img/customers/capture-research-one-bg.png');
    background-size: 200% 200%;
    clip-path: polygon(23% 0%, 100% 0%, 85% 100%, 0% 100%);
    animation: smoothBackground 25s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
}

.capture-two-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/static/img/customers/capture-research-two-bg.png');
    background-size: 200% 200%;
    clip-path: polygon(20% 0%, 82% 0%, 100% 100%, 0% 100%);
    animation: smoothBackground 30s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
}

.capture-three-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/static/img/customers/capture-research-three-bg.png');
    background-size: 200% 200%;
    clip-path: polygon(0% 0%, 77% 0%, 100% 100%, 15% 100%);
    animation: smoothBackground 25s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
}


@keyframes smoothBackground {
  0% {
    background-position: 20% 20%;
  }
  50% {
    background-position: 90% 20%; /* Сдвигаем на полную ширину */
  }
  50.001% {
    background-position: -90% 20; /* Мгновенный (невидимый) сброс */
  }
  100% {
    background-position: 20% 20%; /* Плавное возвращение */
  }
}