/* Блок «Распознавание паспорта без ущерба экологии» */
/*
xs  < 576px — базовые стили
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
xxl ≥ 1400px
*/

.green-ocr-section {

  .green-ocr-black-circle {
    position: absolute;
    z-index: -1;
    background: #101a18;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-40%) translateY(-70%);
    width: 755px;
    height: 755px;
  }


  .greenocr-collage {
    position: relative;
    display: flex;
    justify-content: end;

    .tree-image {
      width: 267px;
      height: auto;
    }
  }
  .text-block {
    max-width: 480px;
  }
}

/* ========================================
   (≥ 576px)
   ======================================== */
@media only screen and (min-width: 576px) {

}

/* ========================================
   (≥ 768px)
   ======================================== */
@media only screen and (min-width: 768px) {
  .green-ocr-section {
    margin-bottom: 270px;
    padding-top: 150px;

    .green-ocr-black-circle {
      top: 50%;
      left: 0;
      transform: translateX(-50%) translateY(-50%);
      width: 1227px;
      height: 1227px;
    }

    .greenocr-collage {
      position: relative;
      display: block;

      .tree-image {
        position: absolute;
        max-width: none;
        width: 400px;
        height: auto;
      }

      .green-ocr-text-image-wrapper {
        position: absolute;
        width: 200px;
        top: 180px;
        right: 0;
        background: #fff;
        border-radius: 10px;
      }

      .animated-lukomorie-text-wrapper {
        position: absolute;
        width: 200px;
        left: 0;
        top: 300px;
        background: #fff;
        border-radius: 10px;
      }
    }
  }
}

/* ========================================
   (≥ 992px)
   ======================================== */
@media only screen and (min-width: 992px) {
  .green-ocr-section {
    .green-ocr-black-circle {
      top: 50%;
      left: 0;
      transform: translateX(-30%) translateY(-50%);
      width: 1227px;
      height: 1227px;
    }

    .green-ocr-white-circle {
      position: absolute;
      z-index: -1;
      background: white;
      border-radius: 50%;
      top: 50%;
      right: 0;
      transform: translateX(100%) translateY(-50%);
      width: 440px;
      height: 440px;
    }

    .greenocr-collage {
      position: relative;
      display: block;

      .tree-image {
        top: -164px;
        left: 0px;
        max-width: none;
        width: 584px;
        height: auto;
      }

      .green-ocr-text-image-wrapper {
        top: 0px;
        right: 0px;
        background: #fff;
        border-radius: 10px;
      }

      .animated-lukomorie-text-wrapper {
        width: 260px;
        height: auto;
        left: -35px;
        top: 240px;
      }
    }
  }

  .green-ocr-section .green-ocr-black-circle {
    transform: translateX(-1000px) translateY(-50%) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .green-ocr-section.animation-on .green-ocr-black-circle {
    transform: translateX(-30%) translateY(-50%);
    opacity: 1;
  }

  .green-ocr-section .green-ocr-white-circle {
    transform: translateX(300%) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .green-ocr-section.animation-on .green-ocr-white-circle {
    transform: translateX(100%) translateY(-50%)  scale(1);
    opacity: 1;
  }
}

/* ========================================
   (≥ 1200px)
   ======================================== */
@media only screen and (min-width: 1200px) {
  .green-ocr-section {

    .greenocr-collage {


      .tree-image {

      }

      .green-ocr-text-image-wrapper {

      }

      .animated-lukomorie-text-wrapper {

      }
    }
  }
}

/* ========================================
   (≥ 1400px)
   ======================================== */
@media only screen and (min-width: 1400px) {

}